How to Get the Value of Selected Radio Button using jQuery


Most of the cases the value of selected radio button gets after form submit. But if you want to get the value of selected radio button before form submits, with jQuery you can do it easily. The jQuery :checked selector helps to get the value of selected radio button. To know the value of selected radio button using jQuery, use :checked selector.

The following example code will help to get the value of checked radio button in a group using jQuery.
JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input[type='button']").on('click', function(){
        var radioValue = $("input[name='gender']:checked").val();
        if(radioValue){
            alert(radioValue);
        }
    });
});
</script>

HTML:

<p>
    Select your gender:
    <input type="radio" name="gender" value="male">Male 
    <input type="radio" name="gender" value="female">Female
</p>
<p><input type="button" value="Get Value"></p>

Leave a reply