jQuery API

:radio Selector

radio selector

version added: 1.0jQuery(':radio')

Description: Selects all elements of type radio.

$(':radio') is equivalent to $('[type=radio]'). As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':radio') is equivalent to $('*:radio'), so $('input:radio') should be used instead.

To select a set of associated radio buttons, you might use: $('input[name=gender]:radio')

Example:

Finds all radio inputs.

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" name="asdf" />
    <input type="radio" name="asdf" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>

  <div>
  </div>
<script>

    var input = $("form input:radio").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

</script>

</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for :radio Selector below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • esteewhy
    Internet Explorer (8) might give You a bizarre "property not supported" exception when using plain :radio selector.

    Specifying input:radio, as suggested above, helps a lot.
  • albox
    I speak little English.
    How do I get me the value of the label of a radio button?
    I tried with Val(), but this brings me your value.

    Help me please.
  • Edu
    what do you mean by label?
    Try this link:
    http://www.thewhyandthehow.com/jquery-solution-...
  • var radiovalue=$("#dividcontainer input:radio:checked").val();
  • shouldnt it be?
    var radiovalue=$("#idRadio_i:checked").val();
  • qmmr
    With two radio buttons it should inform you that rb is undefined, 1 or 2.
    var rb = $("input:radio:checked");
    alert(rb.val());
  • If checking on a form submit is an option, that would be the best way to go.

    This works fine in Firefox 3.6B3, no guarantees in IE or other browsers.
    $(":radio").bind('click',function(){
    alert( this.checked )
    })
    Not sure if that is the intent of your code sample... need some more info on the goal here to comment more.
  • I'm having a problem getting:

    if($('input:radio').is(':checked')) { ... }

    to work. Doesn't seem to be picking up on the is :checked bit...

    [UPDATE]

    After some more trial and error, I've realized that since click event happens before the checking process, I'm having a hard time seeing if a radio is checked or not on click. Any ideas?
  • Try this code:

    $('input:checkbox').each(function(){
    if ($(this).attr('checked'))
    ...
    })