jQuery :radio Selector

What Is :radio?

:radio (since jQuery 1.0) selects every <input type="radio"> — the one-choice-per-group controls used in surveys, settings, and checkout. Official docs state it is equivalent to [type=radio]. Always prefer $("input:radio") over bare $(":radio").

$("input:radio")                 // all radio inputs
$("form input:radio")            // radios inside a form
$("input[name=gender]:radio")    // one radio group (official)
$("input[type=radio]")           // equivalent attribute form

// Avoid on large pages:
$(":radio")                      // implies *:radio

How to Use :radio

Prefix with input, scope to a form or name, then style, count, or bind events.

1. Write $("input:radio") — never bare $(":radio") on large pages.
2. Scope to a form: $("#survey input:radio").
3. Target one group with the official pattern: $("input[name=gender]:radio").
4. Read the selected option with :checked and .val().
5. For hot paths, prefer input[type="radio"] so the browser can optimize.

Pseudocode

matches = []
for each element in search context:
    if element.tag is input
       and element.type is "radio":
        matches.add(element)

return matches

// Official group filter:
keep only matches where name == "gender"

Cheat Sheet

Keep these facts handy while selecting radio buttons.

Live Preview

Run different selectors against a small sample form and see how many radios match.

$("form input:radio")
matched: 3

/* radios only — checkboxes and text ignored */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

var input = $("form input:radio")
  .wrap("<span></span>")
  .parent();

$("#count").text("For this type jQuery found " + input.length + ".");

For this type jQuery found 2.
Both radios wrapped in <span>
Checkboxes and text → unchanged

var a = $("input:radio").length;
var b = $("input[type=radio]").length;

console.log("input:radio →", a);
console.log("[type=radio] →", b);
console.log("same set?", a === b);

input:radio → 2
[type=radio] → 2
same set? true

$("input:radio").closest("label").each(function () {
  this.appendChild(document.createTextNode(" [radio]"));
});
$("input:checkbox").closest("label").each(function () {
  this.appendChild(document.createTextNode(" [checkbox]"));
});

console.log("radios:", $("input:radio").length);
console.log("checkboxes:", $("input:checkbox").length);

radios: 2
checkboxes: 1
Labels show [radio] or [checkbox]

$("input[name=gender]:radio").on("change", function () {
  $("#out").text("Selected: " + this.value);
});

// size radios share a different name — not affected

Pick Female → Selected: female
Pick Male → Selected: male
Size radios → separate group, no handler conflict

var $radios = $("input[type='radio']");
$("#out").text("Found " + $radios.length + " radio(s) via [type=radio]");

// Pure DOM (no jQuery pseudo-class):
// document.querySelectorAll("input[type='radio']")

Found 2 radio(s) via [type=radio]
Works in querySelectorAll — no :radio extension needed

Performance Notes

Official jQuery docs note that because :radio is not CSS, it cannot use the querySelectorAll boost. Prefer [type="radio"] when the page is large or you re-query often.

Key Takeaways