jQuery :radio Selector

What You’ll Learn

The :radio selector matches every <input type="radio"> element — mutually exclusive options in form groups. Available since jQuery 1.0; equivalent to [type=radio]; always prefer input:radio over bare :radio.

Introduction

Surveys, settings panels, and checkout flows use radio buttons when users must pick exactly one option from a set. jQuery’s :radio pseudo-class selects every input whose type attribute is radio.

Official jQuery documentation notes that :radio is equivalent to [type=radio], and recommends prefixing with input — bare $(":radio") implies $("*:radio"). To target one group, combine name with the pseudo-class: $("input[name=gender]:radio").

Understanding the :radio Selector

Think of :radio as a shortcut for radio-type inputs only:

• input:radio → every radio button in scope.
• input[name=size]:radio → one mutually exclusive group.
• input:checkbox → different type — no overlap with :radio.
• Only one radio per name can be checked at a time in standard HTML forms.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":radio" )

// recommended — prefix with input:
$( "input:radio" )
$( "form input:radio" )

// one radio group (official docs example):
$( "input[name=gender]:radio" )

// equivalent attribute form:
$( "input[type=radio]" )

// native CSS (better performance):
document.querySelectorAll( 'input[type="radio"]' )

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

Parameters

• No arguments — keeps elements whose type is radio.

Return value

• A jQuery object containing every matching radio input (zero or more).

Official jQuery API example

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" );

Examples Gallery

Example 1 follows the official jQuery form input:radio demo. Examples 2–5 cover attribute equivalence, contrast with :checkbox, name-scoped groups, and the native performance pattern.

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" ).on( "submit", function( e ) { e.preventDefault(); } );

For this type jQuery found 2.
Both radios wrapped in yellow/red bordered spans
Checkboxes and text inputs → unchanged

console.log( "input:radio →", $( "input:radio" ).length );
console.log( "[type=radio] →", $( "input[type=radio]" ).length );

input:radio → 2
[type=radio] → 2 (identical matched set)

$( "input:radio" ).addClass( "radio-highlight" );
$( "input:checkbox" ).addClass( "cb-highlight" );

// :radio → input[type=radio] only
// :checkbox → input[type=checkbox] only

Radios → class "radio-highlight"
Checkboxes → class "cb-highlight" (separate styling)

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

// size group radios are not affected

Pick gender → #genderOut updates
Size radios → separate group, no handler conflict

$( "input[type='radio']" ).addClass( "option" );

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

All radio inputs → .option class
Works in querySelectorAll — no :radio extension needed

🚀 Common Use Cases

• Survey forms — style or validate input:radio groups.
• Settings panels — read input[name=theme]:radio:checked.
• Checkout — highlight shipping option radios on change.
• Accessibility — pair with <label> elements per group.
• Dynamic UI — enable/disable sections based on selected radio value.
• Performance — prefer input[type="radio"] in hot paths.

📝 Notes

• Available since jQuery 1.0 — equivalent to [type=radio].
• jQuery extension only — not valid in native querySelectorAll(":radio").
• Always use input:radio — bare :radio implies universal scan.
• Official group pattern — input[name=gender]:radio.
• Does not match checkboxes, text fields, or submit buttons.
• Combine with :checked to read the selected option in a group.

💡 Best Practices