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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • http://kimberlyannthompson.com 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.

  • http://devssolution.com Sandeep Bhadauriya

    Nice Post !!

    Thanks for sharing it.

  • http://www.acrosticbytes.com 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

    thank you so much!!!

  • Eddy Jawed

    Your the best bro, thanks for your hard work!

  • jeeta

    thnku bireee yo yo

  • http://bmscomp.com/xwiki Med Said BOUDJELDA

    thanks so much , that was so useful for me

  • 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

    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

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

  • Carmen

    Excelent!!

  • Pingback: browser issue()

  • http://dewatacrafts.com adi

    thanks bro..

  • Pingback: jQuery form selectors example : BLOG()

  • cheers

    thank you for showing the examples.

    it help me

  • Pingback: Rádiógomb kiválasztása JQuery-vel | Kerek egy ég alatt()

  • Pingback: jQuery form selectors example | JQuery()