jQuery :checked: Radio Buttons vs Checkboxes

The jQuery :checked selector is designed to target checkable HTML elements that are currently selected, specifically checkboxes and radio buttons. While the selector applies the exact same filtering logic to both element types under the hood, the fundamental behavioral differences between checkboxes and radio buttons dictate how you retrieve, iterate, and manipulate their values in jQuery scripts.

Core Mechanics of the :checked Selector

The :checked pseudo-class matches all elements that possess a checked state. In pure HTML and the DOM, both <input type="checkbox"> and <input type="radio"> use the checked boolean property.

When you execute $('input:checked'), jQuery queries the DOM and returns a jQuery collection containing every radio button and checkbox currently marked as checked, along with selected <option> elements in standard select drop-downs. To prevent matching unwanted elements, it is standard practice to qualify the selector with an explicit input type or group name.

Handling Checkboxes

Checkboxes allow users to select zero, one, or multiple independent choices within a set. Because multiple checkboxes can be selected at the same time, the :checked selector frequently returns a collection containing multiple elements.

Value Retrieval

Calling jQuery's .val() method directly on a collection of checked checkboxes only returns the value of the first checked element. To extract values from all selected checkboxes, you must iterate over the collection using .map() or .each().

// Selecting all checked checkboxes
var checkedCheckboxes = $('input[type="checkbox"]:checked');

// Extracting all values into an array
var selectedValues = $('input[type="checkbox"]:checked').map(function() {
    return $(this).val();
}).get();

State Detection

To determine if a specific checkbox is toggled, use the .is() method:

var isSubscribed = $('#newsletter-checkbox').is(':checked'); // Returns true or false

Handling Radio Buttons

Radio buttons are designed for mutually exclusive choices. Within a group defined by a shared name attribute, only one option can be checked at any given time.

Value Retrieval

Because only one radio button in a named group can be active, targeting a checked radio group reliably matches at most one element. This allows you to chain .val() directly without needing to loop over the result.

// Retrieve the single selected radio value directly
var selectedGender = $('input[name="gender"]:checked').val();

// Returns undefined if no radio button in the group is checked
if (typeof selectedGender !== 'undefined') {
    console.log("Selected:", selectedGender);
}

State Detection

Checking whether any radio button within a group has been chosen requires measuring the length of the matched set or using .is(':checked') on the selector:

var hasSelection = $('input[name="gender"]').is(':checked'); // true if any is selected

Modifying Checked States

For both radio buttons and checkboxes, updating the checked state programmatically should always be done using the .prop() method rather than .attr(). The checked state reflects a dynamic DOM property, not a static HTML attribute.

// Check a specific checkbox or radio button
$('#agree-terms').prop('checked', true);

// Uncheck an element
$('#agree-terms').prop('checked', false);

When you set .prop('checked', true) on a radio button, the browser automatically unchecks all other radio buttons sharing the same name attribute, mirroring standard user interaction.