jQuery check if checkbox is checked (and JavaScript checked property)

jQuery check if checkbox is checked and javascript check if checkbox is checked both read the same DOM value: the live boolean HTMLInputElement.checked. In jQuery use .prop('checked') or .is(':checked')—not .attr('checked'), which reflects initial markup, not the current UI state (MDN: checked, jQuery .prop()). For structuring UI code, see JavaScript classes.

Tested on: all examples in this tutorial were run with Node.js v20.18.2 running the same logic under jsdom 24 with jQuery 3.7.1 (browser DOM + jQuery APIs), and the output shown below each snippet is its exact console output.

Quick reference

Use this table when you need the smallest answer for check if checkbox is checked jquery vs js check if checkbox is checked: live property vs default attribute, and jQuery selector helpers.

Setup (jsdom + jQuery)

Minimal HTML used for the logs below. For jquery checkbox checked examples, load jQuery (for example 3.7.1) so window.jQuery and $ exist in your script or console.

<input type="checkbox" id="age_checked" />
<input type="number" id="age_textbox" hidden />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Vanilla checked — js check if checkbox is checked

The native property is the direct js check if checkbox is checked path: read cb.checked for a boolean, assign true or false to toggle without touching attributes.

const cb = document.getElementById("age_checked");
console.log("default checked:", cb.checked);
cb.checked = true;
console.log("after assignment checked:", cb.checked);
cb.checked = false;
console.log("after uncheck checked:", cb.checked);

default checked: false
after assignment checked: true
after uncheck checked: false

jQuery is checked — .prop('checked') and .is(':checked')

Both patterns answer jquery is checked and check if checkbox is checked jquery: .is(':checked') fits filter-style truth tests; .prop('checked') returns an explicit boolean and is often clearer when you also set state.

const cb = document.getElementById("age_checked");
const $ = window.jQuery;
cb.checked = false;
console.log("is :checked (unchecked):", $("#age_checked").is(":checked"));
console.log("prop checked (unchecked):", $("#age_checked").prop("checked"));
cb.checked = true;
console.log("is :checked (checked):", $("#age_checked").is(":checked"));
console.log("prop checked (checked):", $("#age_checked").prop("checked"));

is :checked (unchecked): false
prop checked (unchecked): false
is :checked (checked): true
prop checked (checked): true

Use either form for jquery check if checkbox is checked; .prop('checked') is often clearer when you assign checked state as well as read it.

.attr('checked') vs .prop('checked') — jquery checkbox checked pitfall

This snippet shows why jquery checkbox checked tutorials warn against .attr('checked') for live state: with no checked attribute in the HTML, .attr stays undefined while .prop reflects the real toggle.

const cb = document.getElementById("age_checked");
const $ = window.jQuery;
cb.checked = true;
console.log($("#age_checked").attr("checked"));
console.log($("#age_checked").prop("checked"));

undefined
true

change handler — if checkbox is checked jquery pattern

Prefer the change event over click for if checkbox checked javascript and if checkbox is checked jquery flows so keyboard toggles and assistive tech stay aligned. The vanilla example dispatches change after programmatic updates; jQuery listeners should use a classic function callback (not an arrow) if you read this.checked.

const ageCheckbox = document.getElementById("age_checked");
const ageInput = document.getElementById("age_textbox");
ageCheckbox.checked = false;
ageInput.hidden = true;
ageCheckbox.addEventListener("change", function () {
  ageInput.hidden = !this.checked;
});
ageCheckbox.dispatchEvent(new window.Event("change", { bubbles: true }));
console.log("hidden after change (unchecked):", ageInput.hidden);
ageCheckbox.checked = true;
ageCheckbox.dispatchEvent(new window.Event("change", { bubbles: true }));
console.log("hidden after change (checked):", ageInput.hidden);

hidden after change (unchecked): true
hidden after change (checked): false

Equivalent jquery if checkbox is checked style (use function, not an arrow, so this is the DOM element):

$("#age_checked").on("change", function () {
  $("#age_textbox").prop("hidden", !this.checked);
});

Summary

• Read live state with element.checked or $(el).prop('checked') for javascript check if checkbox is checked and jquery check if checkbox is checked.
• Use $(el).is(':checked') when a truthy filter-style test fits your jquery is checked code.
• Avoid .attr('checked') for current UI; use .prop or the property for jquery checkbox checked behavior.
• Listen on change for if checkbox is checked jquery UI patterns; dispatch change/input if programmatic checked updates must run handlers.
• Compare defaultChecked when you care about the original HTML default, not the live value.

References

MDN and jQuery docs for checked, events, .prop(), and the :checked selector—sources behind this check if checkbox is checked jquery guide.

• MDN: HTMLInputElement.checked
• MDN: HTMLInputElement change event
• jQuery: .prop()
• jQuery: :checked selector