Get selected radio button value using JQuery

Using JQuery, we can get the selected radio button value. Lets see how we can do this..

Consider you have a list of Radio Buttons in your form like below

<form id="form1">
    <input type="radio" name="myRadio" value="1" /> 1 <br />
    <input type="radio" name="myRadio" value="2" /> 2 <br />
    <input type="radio" name="myRadio" value="3" /> 3 <br />
</form>

JQuery code to get the selected radio button value is

$('#form1 input').on('change', function () {
        var value = ('input[type="radio"]:checked').val();
        alert(value);
    });

 or you can also use the following code

$('#form1 input').on('change', function () {
        var value = ('input[name="myRadio"]:checked').val();
        alert(value);
    });

When a user selects the radio button, then JQuery's .change() event gets called. And when this event is raised, we are storing the value of the selected radio button in a javascript variable.

For live example look at this fiddle: http://jsfiddle.net/codingsolver/MsYqx/

In this way we can get the selected radio button value using JQuery.

For more posts on JQuery please visit: JQuery