Get value of selected radio button in jQuery

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

Based on user selected we need to perform some further operations like asking for 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 a particular group so we can not use val() method directly.

Let's take an 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 the above example, we have created simple radio buttons for gender and added button. Whenever user clicks on that button we will show a message based on value selected. If you have selected gender then we will show selected gender other wise messages 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 whenever it changes.

Let's take another example to implement on change event and get a 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 an event. Whenever user change radio button then it will check the selected value and print the 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.