Use the change event when your code should react to a checkbox becoming checked or unchecked. It covers user toggles made with a mouse or keyboard. Use click (or onclick) only when the behavior is specifically about a click activation. To read whether the box is selected, use checkbox.checked; checkbox.value is a string payload for form data, not the selected state.
Choose the event based on the behavior you need
| Need | Use | What it tells you |
|---|---|---|
| Run logic after the checkbox changes state | change |
Fires when a user checks or unchecks the box, including keyboard toggles. |
| React specifically to a click activation | click |
Represents the click action; it is not the best description of state-change logic. |
| Track user input changes in an input-style workflow | input |
The HTML specification says a user toggle should produce this event; check compatibility data if you must support a legacy browser. |
For maintainable code, prefer an event listener over an inline attribute such as onchange or onclick. Inline handlers can work, but they mix JavaScript with markup and become harder to manage as the page grows.
Recommended pattern
<label>
<input id="updates" type="checkbox" name="updates" value="weekly">
Send weekly updates
</label>
<script>
const checkbox = document.querySelector("#updates");
checkbox.addEventListener("change", (event) => {
const input = event.currentTarget;
console.log(input.checked); // true or false
console.log(input.value); // "weekly"
});
</script>The listener reads both properties at the moment the user changes the box. event.currentTarget is the element on which the listener was registered.
Read checked for the live boolean state
checkbox.checked is the current Boolean state:
truemeans the box is currently selected.falsemeans it is currently clear.
The HTML checked attribute sets the initial, default state in markup. It is not a live record of later interaction. After a user changes the box, read the checked property instead of inspecting the attribute.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
<input id="terms" type="checkbox" checked>
<script>
const terms = document.querySelector("#terms");
console.log(terms.checked); // current state, initially true
</script>If the user clears that box, terms.checked becomes false; the original checked markup still describes the default state. Code that changes element.checked programmatically should not be treated as a user interaction; do not assume it automatically produces the same user events. If other code must react, call the shared update function yourself or dispatch an appropriate event deliberately.
Understand what a checkbox value is
The value property is a string payload, normally used when the form is submitted. It does not become true or false when the user checks the box.
| Expression | Meaning | Example result |
|---|---|---|
checkbox.checked |
Current selected state | true or false |
checkbox.value |
String payload associated with the input | "weekly" |
checkbox.getAttribute("checked") |
Markup’s default-state attribute | "" when present, otherwise null |
For example, this remains the same payload regardless of whether the box is selected:
<input id="updates" type="checkbox" name="updates" value="weekly">
<script>
const updates = document.querySelector("#updates");
updates.addEventListener("change", () => {
console.log(updates.checked); // changes between true and false
console.log(updates.value); // remains "weekly"
});
</script>If no value attribute is provided, the default submitted value for a checked checkbox is on.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesRank #3
What gets submitted with a form
A checkbox contributes a name/value pair only when it is checked. An unchecked checkbox is omitted from native form submission entirely.
<form>
<label>
<input type="checkbox" name="updates" value="weekly">
Send weekly updates
</label>
<button>Save</button>
</form>- Checked: the form includes
updates=weekly. - Unchecked: the form includes no
updatesfield. - Checked without a
valueattribute: the value ison.
This is separate from the DOM property: JavaScript can read checked at any time, while form serialization decides whether to include the field.
When the server needs an explicit false value
Native checkbox submission does not send a value for the unchecked case. If your server must receive both states, handle the missing field in application logic or use a carefully designed hidden-field pattern. Make sure your server handles duplicate names according to its form parser, because a checked checkbox can produce both the hidden value and the checkbox value.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Inline handlers versus event listeners
Inline onchange
<input type="checkbox" onchange="togglePanel(this)">This is valid for small pages, but the handler is embedded in HTML and can be awkward to reuse or maintain.
Listener-based code
const box = document.querySelector("#notifications");
box.addEventListener("change", (event) => {
const enabled = event.currentTarget.checked;
document.querySelector("#settings").hidden = !enabled;
});This keeps behavior in JavaScript, works naturally with keyboard toggles, and makes it easier to attach, remove, or test handlers.
Quick Recap
Common mistakes and their fixes
- Reading
valueas a Boolean: usecheckedfor the state and reservevaluefor the payload. - Using
onclickfor state logic: usechangeso keyboard toggles are covered as well as pointer activation. - Checking the
checkedattribute after interaction: read the livecheckedproperty. - Expecting an unchecked box in submitted data: account for its omission or implement an explicit false-value strategy.
- Assuming scripted assignments are user events: separate programmatic state updates from user-event handling and notify dependent code explicitly when required.
Practical decision rule
- If the requirement says “when selected or cleared,” attach a
changelistener. - Inside the handler, read
event.currentTarget.checked. - If you need a server payload, read or submit
valueseparately. - If the requirement is literally “when the user clicks,” use
click; do not substitute it for general checked-state tracking. - If you need input-style tracking and target browsers support it, consider
inputfor user toggles.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
