jQuery radio button

Radio buttons are the small circles that allow users to select only one relevant option from several options. Commonly, radio buttons are used in registration forms, exam portals, quiz portals, and more.

Checked/unchecked radio button

In the checked radio button, only one option at a time is selected.

We use .prop() method to create checked/unchecked radio button in jQuery.

Syntax:

For checked radio button

For unchecked radio button

Code:

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>jQuery radio button example</title>
    <!-- jQuery CDN -->
    <script src = "https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<style>
    .container {
        align: "center"
    }
</style>
</head>

<body>
    <div class = "jumbotron">
  <h1 style="color: black;"> jQuery checked/unchecked radio button</h1>
    <div class = "container text-center">
        <h3>Select your gender</h3>
    <label><input type = "radio" name = "gender" id = "male">Male</label>
    <label><input type = "radio" name = "gender" id = "female">Female</label>
</p>
</div>
<!-- Script for checked radio button -->
    <script type="text/javascript">
        $(document).ready(function () {
            
                $("#male").prop("checked", true);            
        
        }); 
    </script>
    </div>
</body>
</html>

Output:

Select radio button based on button click

jQuery also allow us to select relevant radio button based on the button clicked by the user.

Syntax:

$(".button1").click(function () {
          $("#element1").prop("checked" , true)
         });

Code:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Radio button based on button click </title>
    <style>
        .container {
            text-align: center;
            margin: 50px;
        }
    </style>
    <!-- jQuery CDN -->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Add javascript -->
    <script type = "text/javascript">
     $(document).ready(function () {
        // check radio botton element (y) on clicking the button 1 (yes) 
         $(".yes").click(function () {
          $("#y").prop("checked" , true)
         });
       // check radio botton element (n) on clicking the button 2 (no) 
         $(".no").click(function () {
          $("#n").prop("checked" , true)
         });
        //  uncheck both radio buttons element on clicking the reset button
         $(".reset").click(function () {
         $("#y").prop("checked" , false)
         $("#n").prop("checked" , false)
       });
     });
    </script>
    <!-- Script closed -->
</head>
<body>
    <div class = "container">
    <h2 style="color:rgb(8, 43, 109)"> Are you eligible for vote ? </h2>
   <p>
       <input type = "radio" name = "laguage" id = "y">Y
       <input type = "radio" name = "laguage" id = "n">N
        
    </p> 
    <p>
        <input type = "button" class = "yes" value = "Yes">
        <input type = "button" class = "no" value = "No">
        <input type = "button" class = "reset" value = "reset">
     </p>
</div>
</body>
</html>

Output:

On clicking the Yes button

On clicking the No button

On clicking the reset button

Get selected checked radio button value

The .val () method is used to easily get selected checked radio button value.

<!DOCTYPE html>
<html>

<head>
    <title> Get Selected radio button value exmaple </title>
    <!-- Add jQuery and Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <form name = "jd" action="">
        <div class = "wrapper">
            <h1 align = "center" style="margin-top: 40px; padding: 20px;"> Get radio button value example </h1>
            <div class = "row">
                <div class = "col-md-4 offset-4">
                    <div class = "card mt-3">
                        <div class = "form-group text-center bg-light">

                            <div class = "card-header bg-success">
                                <h2 class = "form-group-heading text-center"> Seleat a Course </h2>
                            </div>
                            <form action = "/action_page.php">
                                <label>
                                    <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                        value = "Java">Java
                                </label>
                                <label>
                                    <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                        value = "C Language">C Language
                                </label>
                                <label>
                                <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                    value = "C++">C++
                                    </label>
                                    <label>
                                <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                    value = "Python">Python
                                    </label>
                                <br><br>

                                Your Selected Course is: <input type = "text" id = "result">
                                <input type = "submit" value = "Submit">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- Add script -->
    <script>
        function myCourseFunction(course) {
            document.getElementById("result").value = course;
        }
    </script>
</body>

</html>

Output 1:

On clicking the java radio button, the textbox shows that your selected course is java.

Output 2:

On clicking the C Language radio button, the textbox shows that your selected course is C language.

Output 3:

On clicking the C++ radio button, the textbox shows that your selected course is C++.

Output 4:

On clicking the Python radio button, the textbox shows that your selected course is Python.

Radio button validation

In jQuery radio button validation, we are going apply validation on radio button that it (radio buttons) can't be empty.

For example, If any user will not check the radio button then he/she will get the error message.

To apply radio button validation in jQuery, use the below script -

<script>
       $(document).ready(function() {
         $("#button").click(function() {
             var x = $("input[type = 'radio']:checked");
             if(x.length>0)
             {
                alert("Course selected successfully!!!");
                 return true;
                 
             }
             else {
                    $("#radio_error").text("please select a course");
                    return false;
             }
         });
       }); 
    </script>

Code:

<!DOCTYPE html>
<html>

<head>
    <title> Radio button validation </title>
    <!-- Add Bootstrap and jQuery CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
 <style>
     #radio_error {
         color: red;
         font-size: 18;
     }
     .container {
         text-align: center;
         height: 30px;
         width: 350px;
     }
 </style>
<body>
    <h1 align = "center" style = "margin-top: 20px; padding: 12px; color: black">Radio button validation</h1>
    <div class = "container">
        <div class = "card mt-2 offset-0">
        <h2 style="color: darkgreen;">Select a Course</h2>
        
        <form>
             
        <label>
            <input type = "radio" name = "course" class = "course" value = "btech">B.Tech
        </label>
        <br>
        <label>
            <input type = "radio" name = "course" class = "course" value = "mtech">M.Tech
        </label>
        <br>
        <label>
            <input type = "radio" name = "course" class = "course" value = "bca">BCA
        </label>
        <br>
        <label>
            <input type = "radio" name = "course" class = "course" value = "mca">MCA
        </label>
        <br>
        <font id = "radio_error"></font>
        <br>
        <label>
            <input type = "submit" name = "submit" value = "Submit" id = "mysbutton">
        </label>
    </form>
    </div>
    </div>
    <script src = "text/script"></script>
    <!-- Script to add radio button validation -->
    <script>
       $(document).ready(function() {
         $("#mysbutton").click(function() {
             var x = $("input[type = 'radio']:checked");
             if(x.length>0)
             {
                alert("Course selected successfully!!!");
                 return true;
                 
             }
             else {
                    $("#radio_error").text("please select a course");
                    return false;
             }
         });
       }); 
    </script>
    <!-- Script ends -->
</body>
</html>

Output

Select the radio button and click on the submit button. A pop-up window will appear saying: Course selected successfully.

Just click on the Submit button an error message will appear saying: please select a course.

Show and hide radio button content

In the jQuery show() and hide() methods are used to show and hide the content.

Code:

<!DOCTYPE html>
<html>

<head>
    <title> Radio button validation </title>
    <!-- Add Bootstrap and jQuery CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"> </script>
</head>
<style>
    #radio_error {
        color: red;
        font-size: 18;
    }

    .container {
        text-align: center;
        height: 90px;
        width: 450px;
    }
    #container {
        border: 2px sloid black;
        background-color: aqua;
        color: green;
        margin: 10px;
        padding: 5px;
        }
</style>

<body>
    <h1 align = "center" style = "margin-top: 20px; padding: 12px; color: black"> Show/Hide Radio button Content </h1>
    <div class = "container">
        <div class = "card mt-2 offset-0">
            <h2 style = "color: darkgreen;"> Show and hide Content </h2>

            <form>
                <label>
                    <input type = "radio" name = "sh" id = "hi" value = "hide">Hide Content
                </label>
                <br>
                <label>
                    <input type = "radio" name = "sh" id = "sh" value = "show">Show Content
                </label>
                <div id = "container">
                    <!-- Content that displayed after clicking the Show Content radio button -->
                    <h3>Welcome to javaTpoint</h3>
                </div>
            </form>
        </div>
    </div>
    <script src = "text/script"></script>
    <!-- Script to add show and hide content -->
    <script>
        $(document).ready(function () {
            $("div#container").hide();
            $("input[name=sh]").on("click", function () {
                var selectedValue = $("input[name=sh]:checked").val();
                if (selectedValue == "show") {
                    $("div#container").show();
                }
                else {
                    if (selectedValue == "hide") {
                        $("div#container").hide();
                    }
                }

            });
        });

    </script>
    <!-- Script ends -->
</body>

</html>

Output: