jQuery :checkbox Selector

What You’ll Learn

The :checkbox selector matches every input element with type="checkbox". It is a jQuery form pseudo-class (since 1.0) — ideal for styling groups, counting selections, and wiring check-all behavior in forms.

Introduction

Checkbox inputs let users toggle options on and off — newsletter signup, terms acceptance, multi-select lists. When a form has several checkboxes, you often need to select them all at once for styling, validation, or a master “check all” control.

jQuery’s :checkbox pseudo-class targets every <input type="checkbox"> in your search context. It has existed since jQuery 1.0 and is equivalent to $("[type=checkbox]"). Official docs recommend writing input:checkbox rather than bare :checkbox.

Understanding the :checkbox Selector

Think of :checkbox as a shortcut for “every checkbox input in this scope.” It filters by the HTML type attribute — nothing else.

• <input type="checkbox"> → matches.
• <input type="radio"> → no match (use :radio).
• <input type="text"> → no match.
• <button> → no match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "input:checkbox" )
// shorthand:
$( "input:checkbox" )

// scoped (recommended):
$( "form input:checkbox" )
$( "#preferences input[type='checkbox']" ) // CSS equivalent

Parameters

• No arguments — the pseudo-class matches by input type attribute.

Return value

• A jQuery object containing every checkbox input in the search context.
• Empty collection when no checkbox inputs exist.

Official jQuery API example

var input = $( "form input:checkbox" )
  .wrap( "<span></span>" )
  .parent()
  .css({ background: "yellow", border: "3px red solid" });

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

// Official demo matches 2 checkbox inputs in the form

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover selector comparison, radio contrast, check-all pattern, and the CSS performance alternative. Use the Try-it links to run each snippet.

var input = $( "form input:checkbox" )
  .wrap( "<span></span>" )
  .parent()
  .css({ background: "yellow", border: "3px red solid" });

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

For this type jQuery found 2.
Both checkboxes wrapped in yellow/red bordered spans

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

// Both return the same count on standard checkbox markup

input:checkbox → 3
[type=checkbox] → 3

Equivalent selection — prefer [type=checkbox] for native speed

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

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

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

$( "#checkAll" ).on( "change", function() {
  $( "#prefsForm input:checkbox" ).prop( "checked", this.checked );
});

// Master checkbox controls all others in #prefsForm

Check #checkAll → all form checkboxes checked
Uncheck → all form checkboxes cleared

// Same result as input:checkbox, often faster:
$( "input[type='checkbox']" ).css( "outline", "2px solid #2563eb" );

// Or narrow after a CSS scope:
$( "#form input" ).filter( ":checkbox" );

All checkbox inputs → blue outline
Same elements as input:checkbox

🚀 Common Use Cases

• Check-all — master checkbox toggles every option in a list.
• Form styling — highlight all checkbox controls in a settings panel.
• Validation — require at least one input:checkbox checked before submit.
• Count selected — $("form input:checkbox:checked").length for progress UI.
• Disable group — lock all checkboxes during AJAX save.
• Reset form — uncheck every checkbox in one scoped query.

📝 Notes

• Available since jQuery 1.0 — jQuery extension, not standard CSS.
• Equivalent to $("[type=checkbox]") per official docs.
• Bare $(":checkbox") implies $("*:checkbox") — use input:checkbox.
• Does not match checked state — combine with :checked when needed.
• For performance, prefer input[type="checkbox"] or scoped .filter(":checkbox").
• Pair with form context: $("#myForm input:checkbox").

💡 Best Practices