jQuery :checked Selector

What Is :checked?

:checked (since jQuery 1.0) matches elements that are checked or selected right now — ticked checkboxes, the active radio in a group, and selected <option> elements. It is a standard CSS pseudo-class that jQuery supports in $() queries.

$("input:checked")              // checked inputs now
$("input:checkbox:checked")     // ticked checkboxes only
$("input[name=fruit]:checked")  // selected radio in a group
$("option:checked")             // selected options

// For select-only queries, prefer :selected
// Toggle state with .prop("checked", true/false)

How to Use :checked

Select by live state, then count, read values, or validate — re-query after the user clicks.

1. Prefix with a tag or type: $("input:checked") or $("input:checkbox:checked").
2. Scope to a form when the page has many controls: $("#form input:checked").
3. Read radio/checkbox values with .val() on the matched set.
4. Re-run the selector on change or click so the result stays current.
5. To toggle state, use .prop("checked", …) — not .attr("checked").

Pseudocode

matches = []
for each element in search context:
    if element is checkbox/radio/option
       and element is currently checked/selected:
        matches.add(element)

return matches

// Common follow-ups:
count = matches.length
value = first(matches).value   // radios / single checkbox

Cheat Sheet

Keep these facts handy while working with form state.

Live Preview

Toggle the boxes, then run $("input:checked").length against this mini form.

$("input:checked").length
→ 2

2 are checked!

jQuery Examples

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

var countChecked = function () {
  var n = $("input:checked").length;
  $("#count").text(n + (n === 1 ? " is" : " are") + " checked!");
};

countChecked();
$("input[type=checkbox]").on("click", countChecked);

With Hourly + Monthly pre-checked:
2 are checked!
(Updates as you click boxes)

function update() {
  var lines = [
    "All checkboxes: " + $("input:checkbox").length,
    "Checked only: " + $("input:checkbox:checked").length
  ];
  $("#log").text(lines.join("\n"));
}

update();
$("input:checkbox").on("change", update);

All checkboxes: 5
Checked only: 2
(Changes as you toggle boxes)

$("input").on("click", function () {
  $("#log").text($("input:checked").val() + " is checked!");
});

Click apple → "apple is checked!"
Click banana → "banana is checked!"

function updateCount() {
  var n = $("#newsletterForm input:checkbox:checked").length;
  $("#scopedCount").text(n + " newsletter option(s) selected");
}

updateCount();
$("#newsletterForm input:checkbox").on("change", updateCount);

2 newsletter option(s) selected
(Other form’s checked box is ignored)

$("#termsForm").on("submit", function (e) {
  e.preventDefault();
  if ($("#termsForm input:checkbox:checked").length === 0) {
    $("#msg").text("Please accept at least one option.");
  } else {
    $("#msg").text("Form OK — ready to send.");
  }
});

Submit with none checked → warning message
Submit with ≥1 checked → "Form OK — ready to send."

Performance Notes

Selector cost is rarely the bottleneck on small forms. Scope and a tag prefix matter more on large DOMs with many controls.

Key Takeaways