jQuery :checked Selector

What You’ll Learn

The :checked selector matches form elements that are currently checked or selected — ticked checkboxes, the active radio in a group, and chosen <option> elements. Available since jQuery 1.0; ideal for live counts, validation, and reading user choices.

Introduction

Knowing which options a user picked is central to forms — newsletter preferences, payment methods, survey answers. The HTML checked attribute sets the initial state, but after clicks the live state lives in the DOM property — not the attribute alone.

jQuery’s :checked pseudo-class selects elements that are checked right now. It works on checkboxes, radio buttons, and selected options in <select> elements. Official docs note that for select-only queries you can also use :selected.

Understanding the :checked Selector

Think of :checked as a filter on top of form controls: “Is this box ticked or this option chosen at this moment?”

• Checkbox ticked → matches input:checked.
• Checkbox unticked → no match.
• One radio selected in a group → only that radio matches.
• Selected <option> → matches option:checked.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":checked" )
// recommended — prefix with element type:
$( "input:checked" )
$( "input:checkbox:checked" )
$( "input[name='fruit']:checked" )

// read value of selected radio:
$( "input:checked" ).val()

Parameters

• No arguments — filters by current checked/selected DOM state.

Return value

• A jQuery object containing every checked or selected element in the search context.
• Empty collection when nothing is checked.

Official jQuery API example

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

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

Examples Gallery

Example 1 follows the official jQuery countChecked demo. Examples 2–5 cover checkbox vs checked, radio value, scoped counting, and validation patterns. Use the Try-it links to run each snippet.

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

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

Initial: "2 are checked!" (Hourly + Monthly)
Click any checkbox → count updates live

console.log( "All checkboxes:", $( "input:checkbox" ).length );
console.log( "Checked only:", $( "input:checkbox:checked" ).length );

// :checkbox = every box; :checked = ticked boxes only

All checkboxes: 5
Checked only: 2

Combine type + state pseudo-classes for precise queries

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

// Only one radio per name group matches :checked at a time

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

Only #newsletterForm checkboxes counted
Other form controls ignored

$( "#termsForm" ).on( "submit", function( e ) {
  if ( $( "#termsForm input:checkbox:checked" ).length === 0 ) {
    e.preventDefault();
    alert( "Please accept at least one option." );
  }
});

No boxes checked → alert, submit blocked
At least one checked → form submits

🚀 Common Use Cases

• Live counter — show how many newsletter options are selected.
• Radio display — show the chosen payment method label.
• Validation — require at least one input:checkbox:checked.
• Bulk actions — operate only on checked rows in a table.
• Toggle styling — highlight labels next to checked inputs.
• Serialize subset — collect values from checked inputs only.

📝 Notes

• Available since jQuery 1.0 — matches current checked/selected state.
• Works on checkboxes, radios, and <option> elements.
• For select-only queries, consider :selected per official docs.
• Use .prop("checked") to read or set state — not .attr("checked").
• Prefer input:checked over bare $(":checked") for clarity.
• Re-query after user clicks — the matched set changes with each toggle.

💡 Best Practices