How to Check if Checkbox Is Checked With jQuery

To check a checkbox’s current state with jQuery, read its DOM checked property. Use .prop('checked') for a direct getter, .is(':checked') for a selector-based test, or access the selected DOM node with .get(0).checked (or [0].checked). The HTML checked attribute describes the checkbox’s initial state; it does not track later user changes. (.get())

Check if a Checkbox Is Checked With Direct DOM Access

A jQuery selection is a collection of matched elements. .get(0) returns the first underlying DOM element, whose checked property is a Boolean for its current state. The array-style [0] access does the same. Use either form only when the selection contains the checkbox you intend to inspect.

Run this example:

const checkbox = { checked: true };
console.log(checkbox.checked ? "Checked" : "Not checked");

Checked

In a page that has jQuery loaded, the equivalent check is $("#terms").get(0).checked. The following browser source shows that pattern with a checkbox and a button; it is provided as page source, not as runtime output.

<!doctype html>
<html lang="en">
<body>
  <label><input id="terms" type="checkbox"> Accept the terms</label>
  <button id="check" type="button">Check state</button>
  <p id="result" aria-live="polite"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#check").on("click", function () {
      const isChecked = $("#terms").get(0).checked;
      $("#result").text(isChecked ? "The box is checked." : "The box is not checked.");
    });
  </script>
</body>
</html>

For a selection that may match more than one element, .get(0) still returns only its first match. If there is no match, index zero does not provide a checkbox to read. When you need to inspect every match, iterate over the collection or use .is(':checked') for an “any match” test.

Check if a Checkbox Is Checked With .prop()

Use .prop('checked') to read the current checked state from the selected element:

$("#terms").prop("checked")

For a single checkbox, this getter returns true when checked and false otherwise. A jQuery collection can contain several elements; the getter reads the property from the first matched element. Select a specific checkbox when the result must describe one particular control.

The setter form changes the live state: $("#terms").prop("checked", true) checks it, and passing false unchecks it. Use the getter when asking what the current state is, and the setter when changing it. The same property pattern applies to other live control properties, such as disabled on a button. The jQuery .prop() documentation describes this property access.

Check if a Checkbox Is Checked With .is() and :checked

The :checked selector matches checked checkboxes and radio buttons; see the jQuery selector documentation. .is(':checked') returns a Boolean indicating whether at least one element in the selected jQuery collection matches that selector. See the .is() documentation:

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

This reads naturally when the question is whether a selected checkbox is checked. For example, $("input[name='choice']").is(":checked") is true if any checkbox in that named group is checked. The selector $("input:checked") instead creates a jQuery collection containing all checked inputs; it does not return a Boolean by itself.

Select an ID without a hash inside the attribute value: use $("#terms") or $("input[id='terms']"), not $("input[id='#terms']"). The # belongs to the ID selector syntax, not to the element’s id attribute value.

Common Checkbox Use Cases With jQuery

These patterns use the current checked property and can be adapted to your own IDs, classes, and form structure.

Select by ID or class

Use an ID when checking one known checkbox: $("#terms").prop("checked"). For a class shared by a group, iterate over the matches to report each control’s state:

For example, $(".option").each(function () { console.log(this.id + ": " + (this.checked ? "checked" : "not checked")); }); visits each match. In a page, ensure the class is applied to checkbox inputs and that the code runs after those inputs exist. Inside .each(), this is the current DOM element, so its checked property refers to that checkbox.

Uncheck a checkbox only when it is checked

A setter can uncheck a control directly, so a preceding test is unnecessary if the only goal is to ensure it is unchecked:

$("#terms").prop("checked", false)

If another action should happen only when it was previously checked, test first with if ($("#terms").is(":checked")) { ... }, then set its property to false.

Check whether all or any in a collection are checked

For a group, .is(':checked') answers whether any matched item is checked. To require all items, compare the number of checked matches with the total number of group checkboxes:

For example, const $options = $("input.option[type='checkbox']"); const allChecked = $options.length > 0 && $options.filter(":checked").length === $options.length; const anyChecked = $options.is(":checked"); computes both answers.

The length > 0 condition makes “all checked” false when the selector matches no boxes, which is usually the useful interpretation for a form group. Choose another empty-group policy only if your application needs one explicitly.

Enable a submit button based on a checkbox

Update the button when the checkbox changes, rather than waiting for a button click that may be disabled:

For example, define const update = () => $("#submit").prop("disabled", !$("#terms").is(":checked"));, bind it with $("#terms").on("change", update), and call update() once after binding. This applies the initial state when the page loads and keeps the button in sync as the user toggles the checkbox. Match #submit to the actual submit control in your form.

The HTML checked attribute sets a checkbox’s default checked state when the page is initialized. The live DOM checked property reflects its current state after interaction or script changes. .attr('checked') reads the attribute; use .prop('checked') or .is(':checked') when you need the current state. The .attr() and .prop() methods therefore answer different questions for a checkbox.