jQuery :checkbox Selector

What Is :checkbox?

:checkbox (since jQuery 1.0) selects every element of type checkbox — almost always <input type="checkbox">. Official equivalent: $("[type=checkbox]"). Prefer $("input:checkbox") or $("input[type='checkbox']") over a bare $(":checkbox").

$("input:checkbox")              // recommended
$("input[type='checkbox']")      // native-friendly CSS
$("[type=checkbox]")             // official equivalent of :checkbox

$(":checkbox")                   // implies *:checkbox — slower

✓ <input type="checkbox">
✗ <input type="radio">
✗ <input type="text">

How to Use :checkbox

Prefix with input, scope to a form, then count, style, or toggle.

1. Write $("input:checkbox") — not bare $(":checkbox").
2. Scope when you can: $("form input:checkbox").
3. For speed: $("input[type='checkbox']") (official tip).
4. Combine with :checked when you need only selected boxes.

Pseudocode

matches = []
for each element in search context:
    if element.type is "checkbox":
        matches.add(element)

return matches

// Faster pattern:
return querySelectorAll("input[type='checkbox']")

Cheat Sheet

Keep these facts handy while selecting checkbox inputs.

Live Preview

Run different selectors against a small sample form and see which checkbox inputs match.

$("input:checkbox")
matched: 2
values: one, two

/* recommended — tag + :checkbox */

jQuery Examples

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

var input = $("form input:checkbox");
$("div").text("For this type jQuery found " + input.length + ".");

// Prevent the form from submitting
$("form").on("submit", function (event) {
  event.preventDefault();
});

For this type jQuery found 2.
(two checkbox inputs in the sample form)

console.log("prefixed →", $("input:checkbox").length);
console.log("bare     →", $(":checkbox").length);

// Same count here, but bare form scans every element type

prefixed → 2
bare     → 2

Same matches; prefixed form is the recommended habit

var $a = $("input:checkbox");
var $b = $("input[type='checkbox']");

console.log($a.length === $b.length);
// true — same match set; CSS form is faster

true
Same result set; CSS form uses querySelectorAll

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

// Checkboxes and radios are separate type filters

:checkbox → 2
:radio    → 1

Different types — different selectors

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

// Demo: simulate "check all"
$("#checkAll").prop("checked", true).trigger("change");
console.log($("form input:checkbox:checked").length);

3
Master + two options are all checked

Performance Notes

Official jQuery docs note that because :checkbox is not CSS, it cannot use the querySelectorAll boost. Use [type="checkbox"] instead when speed matters.

Key Takeaways