:radio Selector

Categories: Selectors > Form

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.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.

qmmr

With two radio buttons it should inform you that rb is undefined, 1 or 2.
var rb = $("input:radio:checked");
alert(rb.val());

Drew

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.

hotmeteor

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?

jQuery API