Codewolfy - Learn Programming For free
Get value of checked radio button in jQuery

While working with forms, sometimes we need to get some specific input like gender or name prefix then radio button are idle choice for that input. Generally radio button are used for user selection from per-defined values. For example, In registration page gender is commonly used to determine gender of user.

Based on user selected we need to perform some further operations like asking different user inputs based on gender. Then we need to know which radio button is checked by user and perform action based on that value.

In further examples, we will get value of selected or checked radio button value using selector in jQuery. We will also take some with class, name or id based getting value of radio button.

To get checked or selected radio button value, we nee to use the jQuery :checked selector with the val() method. Radio button group contains common name for particular group so we can not use val() method directly.

Let's take example to understand how it works:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery Get Checked Radio Button Value</title>
    </head> 
    <body>
        <h4>Please select your gender.</h4>
        <p> 
            <label><input type="radio" name="gender" value="male">Male</label> 
            <label><input type="radio" name="gender" value="female">Female</label>
        </p>
        <p><input type="button" value="Show Selected" id="getGeneder"></p>

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#getGeneder').click(function(){
                    var selectedValue = $("input[name='gender']:checked").val();

                    if(selectedValue){
                        alert("Slected gender is : "+selectedValue);
                    }else{
                        alert("Please check radio button first.");
                    }
                });
            });
        </script>
    </body>
</html>

In above example, we have created simple radio buttons for gender and added button. Whenever user click on that button we will show a message based on value selected. If you has selected gender then we will show selected gender other wise message to select gender.

Here, we have defined our logic based on button click but we can also trigger on change event and get selected radio button when ever it changes.

Let's take another example to implement on change event and get checked radio button value using jQuery.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery Get Checked Radio Button Value</title>
    </head> 
    <body>
        <h4>Please select your gender.</h4>
        <p> 
            <label><input type="radio" name="gender" value="male">Male</label> 
            <label><input type="radio" name="gender" value="female">Female</label>
        </p>

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $('input:radio[name=gender]').change(function () {
                    var selectedValue = $('input:radio[name=gender]:checked').val();

                    if(selectedValue){
                        alert("Slected gender is : "+selectedValue);
                    }else{
                        alert("Please check radio button first.");
                    }
                });
            });
        </script>
    </body>
</html>

In above example, user do not have to click button to trigger event. Whenever user change radio button then it will check selected value and print message accordingly.

Conclusion

In this article, we demonstrated how to get selected or checked value of radio button using jQuery. In addition, we have attached on change event with radio selection.

Share your thoughts

Ask anything about this examples