# How to Verify if a jQuery Checkbox Is Checked Using JavaScript

> Learn how to verify if a jQuery checkbox is checked using JavaScript with .prop('checked') or .is(':checked'). Get real-time DOM state for reliable results.

- Repository: [Vue/core](https://github.com/vuejs/core)
- Tags: how-to-guide
- Published: 2026-02-19

---

**Use `.prop('checked')` or `.is(':checked')` to verify if a jQuery checkbox is checked, as these methods read the live DOM property that reflects real-time state changes.**

To reliably verify if a jQuery checkbox is checked, you must query the DOM property rather than the HTML attribute, which only represents the initial markup. This distinction is critical because the `checked` property updates dynamically whenever a user toggles the control or a script modifies the state. The vuejs/core repository demonstrates this same principle in its runtime DOM modules, where checkbox state is managed exclusively through property manipulation to ensure cross-browser consistency.

## Why You Should Avoid .attr('checked')

The `.attr('checked')` method reads the HTML attribute defined in the initial markup, not the current state of the form control. When a user clicks a checkbox or JavaScript sets `element.checked = true`, the HTML attribute remains unchanged, causing `.attr('checked')` to return stale information.

The Vue.js source code in [`packages/runtime-dom/src/modules/props.ts`](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/modules/props.ts) explicitly handles the `checked` property for checkbox inputs around lines 40-42, ensuring the framework sets the DOM property rather than the attribute. This mirrors the correct approach jQuery users should follow.

## Two Reliable Methods to Verify Checkbox State

### Using .prop('checked')

The `.prop('checked')` method accesses the **DOM property** directly, returning a boolean `true` or `false` that reflects the current state regardless of how the checkbox was toggled.

```javascript
const isChecked = $('#myCheckbox').prop('checked');

```

This is the most performant and explicit method available in jQuery.

### Using .is(':checked')

The `.is(':checked')` selector shorthand evaluates whether the element matches the CSS `:checked` pseudo-class, which also inspects the `checked` property under the hood.

```javascript
const isChecked = $('#myCheckbox').is(':checked');

```

Both approaches yield identical results, though `.prop('checked')` is marginally faster as it avoids selector engine overhead.

## Practical Code Examples

### Simple Boolean Verification

Retrieve the current state for conditional variables:

```javascript
const subscribed = $('#newsletter').prop('checked');
console.log(subscribed); // true or false

```

### Conditional Logic Execution

Execute code only when the checkbox is ticked:

```javascript
$('#saveBtn').on('click', function () {
  if ($('#agree').prop('checked')) {
    submitForm();
  } else {
    showWarning('Please agree to the terms.');
  }
});

```

### Handling Multiple Checkboxes

Filter a group of checkboxes to collect values from only the selected items:

```javascript
const selectedFruits = $('.fruit:checkbox')
  .filter((_, el) => $(el).prop('checked'))
  .map((_, el) => $(el).val())
  .get(); // Returns array like ['apple', 'banana']

```

## Edge Cases and Browser Compatibility

Several scenarios demonstrate why reading the DOM property is essential:

- **Script-driven changes**: When JavaScript sets `element.checked = true`, only the property updates, making `.prop('checked')` the reliable verification method.
- **Form resets**: After a form reset, the browser restores the original checked state, which the DOM property reflects immediately.
- **Legacy browser support**: jQuery normalizes behavior in older browsers (pre-IE9), but `.prop('checked')` remains the consistent interface.
- **Accessibility alignment**: Screen readers and ARIA tools expect the `checked` property to determine state, not the attribute.

## How Vue.js Core Implements Checkbox State

The vuejs/core repository uses the same property-based logic for its checkbox handling, validating the approach used in jQuery.

In [`packages/runtime-dom/src/modules/props.ts`](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/modules/props.ts), the runtime distinguishes the `checked` property for `<input type="checkbox">` elements to ensure proper DOM updates. This code specifically handles the property assignment around lines 40-42, avoiding attribute manipulation for boolean states.

For `v-model` bindings, [`packages/runtime-dom/src/directives/vModel.ts`](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/directives/vModel.ts) implements checkbox synchronization by directly assigning to `el.checked` (lines 317-322), mirroring the jQuery `.prop('checked')` read pattern.

During server-side rendering, [`packages/server-renderer/src/helpers/ssrVModelHelpers.ts`](https://github.com/vuejs/core/blob/main/packages/server-renderer/src/helpers/ssrVModelHelpers.ts) manages the initial `checked` attribute serialization, though the client-side hydration still relies on the DOM property for interactivity.

## Summary

- **Always use `.prop('checked')`** or `.is(':checked')` to verify if a jQuery checkbox is checked, as these read the live DOM property.
- **Avoid `.attr('checked')`**, which only returns the initial HTML markup value and ignores dynamic changes.
- **Reference Vue.js core implementations** in [`props.ts`](https://github.com/vuejs/core/blob/main/props.ts) and [`vModel.ts`](https://github.com/vuejs/core/blob/main/vModel.ts) to understand why property-based access ensures cross-browser reliability.
- **Handle multiple checkboxes** by filtering collections using `.prop('checked')` inside the filter callback.
- **Trust the DOM property** for script-driven changes, form resets, and accessibility tool compatibility.

## Frequently Asked Questions

### What is the difference between .prop('checked') and .is(':checked')?

Both methods verify if a jQuery checkbox is checked by reading the DOM property, but `.prop('checked')` accesses the property directly while `.is(':checked')` evaluates a CSS selector. The `.prop()` method is slightly more performant because it bypasses the selector engine, though both return identical boolean results.

### Why does .attr('checked') return undefined after I click the checkbox?

The `.attr('checked')` method reads the HTML attribute from the initial markup, which does not update when a user toggles the checkbox. Once the browser renders the element, subsequent changes modify only the DOM property, leaving the attribute stale. Always use `.prop('checked')` to read the current interactive state.

### How do I check if any checkbox in a group is selected?

Use jQuery's `.is()` method with the `:checked` selector on the collection, or filter the set using `.prop('checked')`. For example, `$('.option:checkbox').is(':checked')` returns true if at least one is selected, while `.filter((i, el) => $(el).prop('checked'))` returns the specific elements that are checked.

### Does Vue.js use the same method to determine checkbox state?

Yes, the vuejs/core repository handles checkbox state through the DOM property in [`packages/runtime-dom/src/modules/props.ts`](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/modules/props.ts) and [`packages/runtime-dom/src/directives/vModel.ts`](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/directives/vModel.ts). Vue assigns values directly to `el.checked` rather than using attributes, confirming that reading the `checked` property is the standard across modern JavaScript frameworks.