How can I know which radio button is selected via jQuery?
To get the value of the selected radioName
item of a form with 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>
Use this..
$("#myform input[type='radio']:checked").val();
If you already have a reference to a radio button group, for example:
var myRadio = $("input[name=myRadio]");
Use the filter()
function, not find()
. (find()
is for locating child/descendant elements, whereas filter()
searches top-level elements in your selection.)
var checkedValue = myRadio.filter(":checked").val();
Notes: This answer was originally correcting another answer that recommended using find()
, which seems to have since been changed. find()
could still be useful for the situation where you already had a reference to a container element, but not to the radio buttons, e.g.:
var form = $("#mainForm");...var checkedValue = form.find("input[name=myRadio]:checked").val();