How can I know which radio button is selected via jQuery?

3 years Ago 1 Min Read 935 Views

Solution:

To determine the value of the Select  radioName of a form with the id  myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here’s an example.

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

This is how you can use it

$("#myform input[type='radio']:checked").val();

For example, if you already have a radio button group reference:

var myRadio = $("input[name=myRadio]");

 filter()  is better than  find().  filter()  searches for top-level elements within your selection, while  find() can be used to locate child/descendant element. ()

var checkedValue = myRadio.filter(":checked").val();

Notes: This was an original answer to a question that suggested using  find(). It seems to have been updated. If you have a reference to a container elements but not to radio buttons,  find() might still be useful. This is:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();