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.

The snippets below assume a minimal page with #age_checked and #age_textbox and a global $ (jQuery). The public Run control does not load jsdom + jQuery, so each runnable JavaScript block uses {run=false}—use Copy and run locally (browser console, jsdom + jQuery, or your test harness).

Tested on: Node.js v20.18.2 with jsdom and jQuery 3.7.1 for editorial QA. Each {run=false} block is followed by a separate fenced output block with the exact console output from that run—reproduce locally with Copy if your environment differs.

Quick reference

Live UI state lives on the .checked property; the checked HTML attribute only reflects the initial default—use .prop in jQuery, not .attr, for current value.

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

.checked / .prop('checked') reflect what the user sees; .attr('checked') does not update when they toggle—wire change, not only click, and dispatchEvent if you set checked from code.

• 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