A simple example to select a radio button with jQuery dynamically.
A radio buttons group, with a name=”sex”.
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
1. To display the selected radio button value.
$('input:radio[name=sex]:checked').val();
2. To select a radio button (Male).
The radio button is 0-based, so the ‘Male’ = ‘0’, ‘Female’ = ‘1’ and ‘Unknown’ = ‘2’.
$('input:radio[name=sex]:nth(0)').attr('checked',true);
or
$('input:radio[name=sex]')[0].checked = true;
3. To select a radio button (Female).
$('input:radio[name=sex]:nth(1)').attr('checked',true);
or
$('input:radio[name=sex]')[1].checked = true;
4. To select a radio button (Unknown).
$('input:radio[name=sex]:nth(2)').attr('checked',true);
or
$('input:radio[name=sex]')[2].checked = true;
5. To reset the selected radio button.
$('input:radio[name=sex]').attr('checked',false);
jQuery select a radio button example
<html>
<head>
<title>jQuery select a radio button example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery select a radio button example</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#isSelect").click(function () {
alert($('input:radio[name=sex]:checked').val());
});
$("#selectMale").click(function () {
$('input:radio[name=sex]:nth(0)').attr('checked',true);
//$('input:radio[name=sex]')[0].checked = true;
});
$("#selectFemale").click(function () {
$('input:radio[name=sex]:nth(1)').attr('checked',true);
//$('input:radio[name=sex]')[1].checked = true;
});
$("#selectUnknown").click(function () {
$('input:radio[name=sex]:nth(2)').attr('checked',true);
//$('input:radio[name=sex]')[2].checked = true;
});
$("#reset").click(function () {
$('input:radio[name=sex]').attr('checked',false);
});
});
</script>
</head><body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
<br/>
<br/>
<br/>
<input type='button' value='Display Selected' id='isSelect'>
<input type='button' value='Select Male' id='selectMale'>
<input type='button' value='Select Female' id='selectFemale'>
<input type='button' value='Select Unknown' id='selectUnknown'>
<input type='button' value='Reset' id='reset'>
</body>
</html>
Thank you very much. Very useful tutorial even a decade later.
not work
thanks man
I’m testing it on codepen but it works only on the first try, then it stops (with only exception of the display button)… Same code, I wonder why…
I know this is old but it still shows up in search results. The reason is probably because this example uses attr(…) rather than prop(…). Switch this in the example above and it should work more than once.
Thanks thanks thanks thanks…
Excellent post!!!
Good topic, very information, on my side I get the checked value and store it but I cant seem to select it back by name. Your examples on setting are by index, how do you set by value? Thanks
thank you , nice post
if you have a lengthy name or a . (period) in the name of the radio button you may want to use, $(“input:radio[name=’sex’]”).attr(‘checked’,false);
thanks! your post helped after various trial and errors
Thanks very much for posting this! I can’t believe how much bad/false info is out there regarding the setting of radio buttons but your writeup is straight-to-the-point and quite helpful. Oh, and it works whereas about 6 other examples did not. Thank you! 🙂
Thanks.. very helpful post
Thanks… good Post!!!! 🙂
Thank you so much for making this! I have been trying various suggested solutions for hours, but this was the first one that worked.
Nice Post !!
Thanks for sharing it.
Thank you so much. I was trying to fix one thing for hours. Did searched a lot of sites, but your one, worked..
Please keep writing.
thank you so much!!!
Your the best bro, thanks for your hard work!
thnku bireee yo yo
thanks so much , that was so useful for me
Thanks! It really helped me. But the style of radio buttons change when I use this js. Will be more helpful if the style is retained.
See jQuery prop() help page for an explanation on the difference between attr() and prop() and why prop() is now preferable.
prop() was introduced with jQuery 1.6 in May 2011.
Radio button reset is not happening in firefox..Please suggest me how to do that
Excelent!!
thanks bro..
thank you for showing the examples.
it help me