Check Whether a Checkbox Is Checked with jQuery

You will learn how jQuery selects a checkbox by ID, how the :checked selector works, and why .is(":checked") is usually the clearest way to return a Boolean value.

A checkbox has a checked state: it is either checked or unchecked. In jQuery, the :checked selector matches checked checkboxes and selected radio buttons.

When you already know the checkbox's unique id, select that one element first, then test its state:

$("#newsletter").is(":checked");

This returns true when the checkbox is checked and false otherwise.

The original selector uses [@id=...]. The @ syntax was used by very old jQuery versions and is not valid in modern jQuery. Use an ID selector such as #idValue, or a standard attribute selector such as [id="idValue"].

Checking state matters because a checkbox's HTML markup and its current browser state can differ. The current state is represented by the checked property, which jQuery's :checked selector reads.

Think of a checkbox as a light switch with a unique label.

• The checkbox id is the label, such as newsletter.
• Selecting #newsletter means finding that specific switch.
• Asking .is(":checked") means asking, “Is this switch currently on?”

Do not count every lit switch in the room when you only need to know whether one labelled switch is on.

Select a checkbox with its ID and test it with .is(":checked"):

function isCheckedById(id) {
  return $("#" + id).is(":checked");
}

Example HTML:

<label>
  <input id="email-updates" type="checkbox" checked>
  Receive email updates
</label>

Example use:

const receivesUpdates = isCheckedById("email-updates");
console.log(receivesUpdates); // true

You can also read the DOM property directly through jQuery:

const isChecked = $("#email-updates").prop("checked");

Both approaches return a Boolean for a matching checkbox. .is(":checked") reads naturally when you are testing a condition.

Consider this page:

<input id="terms" type="checkbox">

And this JavaScript:

function isCheckedById(id) {
  return $("#" + id).is(":checked");
}

const acceptedTerms = isCheckedById("terms");
console.log(acceptedTerms);

Execution steps:

1. isCheckedById("terms") receives the string "terms".
2. "#" + id creates the selector "#terms".
3. $("#terms") finds the element whose ID is terms.
4. .is(":checked") tests whether that element is currently checked.
5. Because the example checkbox has no checked state, the method returns false.
6. If the user checks it and the function runs again, it returns true.

A trace with a checked element:

<input id="terms" type="checkbox" checked>

The same function now returns true.

Checkbox state checks are common in browser-based applications:

• Terms acceptance: prevent form submission until a user accepts required terms.
• Notification settings: save whether email or SMS notifications are enabled.
• Bulk actions: enable a Delete button only when at least one table row is selected.
• Optional form sections: show delivery instructions only when “Use a different delivery address” is checked.
• Filters: include products marked “In stock” or “On sale” when a filter checkbox is enabled.

For one known checkbox, use its ID and .is(":checked"). For a group of checkboxes, select the group and use .length to count checked items.

In real projects, developers usually check a checkbox at the moment it affects an action, rather than storing a separate variable that can become outdated.

Form validation with a guard clause

$("#signup-form").on("submit", function (event) {
  if (!$("#terms").is(":checked")) {
    event.preventDefault();
    $("#terms-error").text("You must accept the terms before continuing.");
    return;
  }
});

The early return keeps the valid path simple.

Reacting when the user changes a setting

$("#email-updates").on("change", function () {
  const enabled = $(this).is(":checked");
  console.log("Email updates enabled:", enabled);
});

Inside an event handler, this is the checkbox that triggered the event. Using $(this) avoids looking it up again by ID.

Counting a checkbox group

const selectedCount = $("input[name='topics']:checked").length;

Use this pattern when you intentionally need the number of checked boxes, not the state of one specific box.

IDs containing special selector characters

IDs should preferably use simple values such as email-updates. If an ID contains characters with meaning in CSS selectors, escape the dynamic value:

const id = "option:weekly";
const isChecked = $("#" + $.escapeSelector(id)).is(":checked");

$.escapeSelector is available in jQuery 3.0 and later.

Using obsolete @id syntax

This is not modern jQuery selector syntax:

$("input[@id=" + id + "]:checked")

Use an ID selector instead:

$("#" + id).is(":checked")

Forgetting to quote attribute selector values

If you need an attribute selector, quote its value:

$("input[id='email-updates']:checked")

For a dynamic ID that may contain selector characters, prefer $.escapeSelector:

$("#" + $.escapeSelector(id)).is(":checked");

Counting when a Boolean is needed

This works, but it is unnecessarily indirect for one checkbox:

const checked = $("#terms:checked").length;
return checked > 0;

Prefer:

return $("#terms").is(":checked");

Using .attr("checked") for current state

Avoid this for user interaction:

const checked = $("#terms").attr("checked");

checked as an HTML attribute describes the initial markup state. Use .prop("checked") or .is(":checked") to read the current state:

const checked = $("#terms").prop("checked");

Giving multiple elements the same ID

An ID must be unique in a document. Do not assign the same ID to every checkbox in a group. Use a shared name or class for groups:

<input class="topic" name="topics" type="checkbox" value="javascript">
<input class="topic" name="topics" type="checkbox" value="jquery">

.is() versus .prop()

• Use .is(":checked") when writing a condition: if ($("#terms").is(":checked")).
• Use .prop("checked") when explicitly reading or setting the checkbox property.

$("#terms").prop("checked", true); // checks the box

ID selector versus attribute selector

$("#terms")                 // best for a known, simple ID
$("input[id='terms']")      // valid, but more verbose

An ID selector is concise and communicates that the element should be unique.

// Is one checkbox checked?
$("#checkbox-id").is(":checked");

// Read the current checked property
$("#checkbox-id").prop("checked");

// Set the current checked property
$("#checkbox-id").prop("checked", true);
$("#checkbox-id").prop("checked", false);

// Count checked checkboxes in a named group
$("input[name='group-name']:checked").length;

// Handle user changes
$("#checkbox-id").on("change", function () {
  console.log($(this).is(":checked"));
});

Rules:

• Use unique IDs for individual elements.
• Use :checked for the current checked state.
• Use .is() or .prop() when you need true or false.
• Use .length when you need a count.
• Do not use the obsolete [@id=...] selector syntax.
• For a dynamic ID with special CSS characters, use $.escapeSelector(id) in jQuery 3+.

How do I check whether a checkbox is checked in jQuery?

Use:

$("#my-checkbox").is(":checked");

It returns true or false.

Does :checked work for radio buttons too?

Yes. :checked matches checked checkboxes and the selected radio button.

Why does .length return 1 or 0?

.length counts the number of elements in a jQuery collection. A unique checkbox selector can match one element (1) or no checked elements (0). It is not itself a Boolean.

Should I use .attr("checked") or .prop("checked")?

Use .prop("checked") for the current user-visible state. The checked attribute is mainly the initial HTML default.

Can multiple checkboxes have the same ID?

No. IDs must be unique. Use the same name or class to identify related checkboxes.

How can I check a checkbox with a dynamic ID safely?

For simple IDs, use $("#" + id).is(":checked"). In jQuery 3+, escape an ID that may contain CSS selector characters:

$("#" + $.escapeSelector(id)).is(":checked");

What happens if the ID does not exist?

The selector matches no elements, and .is(":checked") returns false.

• jQuery selectors — Learn how #id, .class, attribute selectors, and pseudo-selectors find elements.
• CSS :checked pseudo-class — The selector concept behind matching selected checkboxes and radio buttons.
• jQuery .prop() — Read and update live DOM properties such as checked, disabled, and selected.
• jQuery events — Use the change event to run code as checkbox state changes.
• HTML form validation — Combine checkbox checks with submission validation and useful error messages.
• Checkbox groups and name attributes — Identify and process multiple related form controls.
• Boolean values — Understand true and false values used in conditions.