Get Value of Selected Radio Button in jQuery

6 mins0
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 the radio button is an idle choice for that input. Generally, radio buttons are used for user selection from per-defined values. For example, On the registration page, gender is commonly used to determine the gender of the user.

Based on the 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 a user and perform action based on that value.

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

To get a checked or selected radio button value, we nee to use the jQuery :checked selector with the val() method. The radio button group contains a common name for a particular group so we can not use the 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 a button. Whenever the user clicks on that button we will show a message based on a value selected. If you have selected gender then we will show the selected gender other messages to select gender.

Here, we have defined our logic based on button click but we can also trigger on change event and get the 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 the above example, the user do not have to click a button to trigger an event. Whenever the user changes the radio button then it will check the selected value and print the message accordingly.

Conclusion

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

Related Articles