Main Tutorials

How to select a radio button with jQuery

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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
26 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
hudefaka ishi
6 years ago

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…

Tnaa
5 years ago
Reply to  hudefaka ishi

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.

Yorch
8 years ago

Thanks thanks thanks thanks…

Excellent post!!!

siva
9 years ago

thank you , nice post

vision
10 years ago

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! 🙂

Med Said BOUDJELDA
11 years ago

thanks so much , that was so useful for me

cheers
12 years ago

thank you for showing the examples.

it help me

Kin Wong
4 years ago

Thank you very much. Very useful tutorial even a decade later.

sdfsd
5 years ago

not work

MagicWarms
5 years ago

thanks man

Anele
9 years ago

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

Pradeep Chintam
9 years ago

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);

ajs
9 years ago

thanks! your post helped after various trial and errors

Risha
10 years ago

Thanks.. very helpful post

Maria
10 years ago

Thanks… good Post!!!! 🙂

Kim
10 years ago

Thank you so much for making this! I have been trying various suggested solutions for hours, but this was the first one that worked.

Sandeep Bhadauriya
10 years ago

Nice Post !!

Thanks for sharing it.

Raihan Taher
10 years ago

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.

Lars
10 years ago

thank you so much!!!

Eddy Jawed
10 years ago

Your the best bro, thanks for your hard work!

jeeta
10 years ago

thnku bireee yo yo

Pari
11 years ago

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.

John
11 years ago

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.

Umesh
11 years ago

Radio button reset is not happening in firefox..Please suggest me how to do that

Carmen
11 years ago

Excelent!!

adi
12 years ago

thanks bro..