How to Check a jQuery Checkbox's State and Get a Radio Button's Value

Checking a checkbox's state and reading a selected radio button's value are two small, common jQuery patterns worth knowing directly, since the correct approach differs slightly between the two input types.

Checking whether a checkbox is checked

if ($('#terms').is(':checked')) {
    // the checkbox is currently checked
}

$('#terms').change(function () {
    if ($(this).is(':checked')) {
        console.log('Checked');
    } else {
        console.log('Unchecked');
    }
});

:checked is a jQuery pseudo-selector specifically for this purpose — using $('#terms').val() instead would return the checkbox's value attribute (often just "on" by default), not whether it's actually checked, which is a common mix-up.

Setting a checkbox's checked state programmatically

$('#terms').prop('checked', true);  // check it
$('#terms').prop('checked', false); // uncheck it

.prop(), not .attr(), is the correct method here — checked is a boolean DOM property that reflects live state, while the checked HTML attribute only reflects the initial state at page load, which is why .attr('checked', true) doesn't reliably work for toggling a checkbox after the page has already rendered.

Getting the value of the currently selected radio button in a group

 Basic
 Pro
 Enterprise

const selectedPlan = $('input[name="plan"]:checked').val();

Combining the name attribute selector with :checked is the standard way to find which radio button in a named group is currently selected — since only one radio button per shared name can be checked at a time, this always returns exactly one value.

Reacting when the radio selection changes

$('input[name="plan"]').change(function () {
    const selected = $('input[name="plan"]:checked').val();
    console.log('Plan changed to:', selected);
});

Getting all checked checkboxes from a group of multiple

 Sports
 Music
 Tech

const selectedInterests = $('input[name="interests[]"]:checked').map(function () {
    return $(this).val();
}).get();
// e.g. ['sports', 'tech']

Unlike radio buttons, multiple checkboxes sharing a name can be checked simultaneously — .map().get() collects every checked value into a plain JavaScript array, which is the pattern needed when a group of checkboxes represents a multi-select set of options rather than a single either/or choice.