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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
hudefaka ishi
Guest
hudefaka ishi

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…

siva
Guest
siva

thank you , nice post

vision
Guest
vision

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
Guest
Med Said BOUDJELDA

thanks so much , that was so useful for me

Yorch
Guest
Yorch

Thanks thanks thanks thanks…

Excellent post!!!

Anele
Guest
Anele

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
Guest
Pradeep Chintam

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
Guest
ajs

thanks! your post helped after various trial and errors

Risha
Guest
Risha

Thanks.. very helpful post

Maria
Guest
Maria

Thanks… good Post!!!! :)

Kim
Guest
Kim

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
Guest
Sandeep Bhadauriya

Nice Post !!

Thanks for sharing it.

Raihan Taher
Guest
Raihan Taher

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
Guest
Lars

thank you so much!!!

Eddy Jawed
Guest
Eddy Jawed

Your the best bro, thanks for your hard work!

jeeta
Guest
jeeta

thnku bireee yo yo

Pari
Guest
Pari

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
Guest
John

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
Guest
Umesh

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

Carmen
Guest
Carmen

Excelent!!

trackback
browser issue

[…] 38 Can you post the code where you are setting the default radio button? That should help solve the issue. In the meantime you might look here for instructions on setting radio button in jquery. How to select a radio button with jQuery […]

adi
Guest
adi

thanks bro..

trackback
jQuery form selectors example : BLOG

[…] More detail… […]

cheers
Guest
cheers

thank you for showing the examples.

it help me

trackback
Rádiógomb kiválasztása JQuery-vel | Kerek egy ég alatt

[…] http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/ Kategória: JQuery | A közvetlen link. ← Egyszer? animáció Android-ra […]

trackback
jQuery form selectors example | JQuery

[…] More detail… […]