Introduction

In plain JavaScript, checking or unchecking a checkbox means setting its checked property to true or false. The important detail is that you should work with the live DOM property, not only the original HTML attribute, because user interaction changes the property during runtime.

The Basic Pattern

A checkbox element exposes a boolean checked property:

<input type="checkbox" id="subscribe">

1const checkbox = document.getElementById('subscribe');
2
3checkbox.checked = true;   // check it
4checkbox.checked = false;  // uncheck it

This is the normal browser API and it is enough for most cases.

Toggle A Checkbox

If you want to flip the current state:

const checkbox = document.getElementById('subscribe');
checkbox.checked = !checkbox.checked;

That is useful when the checkbox is controlled by another UI element, such as a button:

<input type="checkbox" id="subscribe">
<button id="toggleBtn">Toggle</button>

1const checkbox = document.getElementById('subscribe');
2const toggleBtn = document.getElementById('toggleBtn');
3
4toggleBtn.addEventListener('click', () => {
5    checkbox.checked = !checkbox.checked;
6});

React To User Changes

If you need logic to run when the user changes the state, listen for the change event:

1const checkbox = document.getElementById('subscribe');
2
3checkbox.addEventListener('change', () => {
4    if (checkbox.checked) {
5        console.log('Subscribed');
6    } else {
7        console.log('Unsubscribed');
8    }
9});

This is a common pattern for forms, filters, feature toggles, and consent checks.

Work With Several Checkboxes

For checkbox groups, query them together:

<input type="checkbox" class="feature" value="a">
<input type="checkbox" class="feature" value="b">
<input type="checkbox" class="feature" value="c">

1const boxes = document.querySelectorAll('.feature');
2
3boxes.forEach(box => {
4    box.checked = true;
5});

To uncheck them all:

boxes.forEach(box => {
    box.checked = false;
});

This is cleaner than repeating individual getElementById calls for each checkbox.

Avoid setAttribute For Live State Changes

Developers sometimes try this:

checkbox.setAttribute('checked', 'checked');

That updates the attribute in markup terms, but the live state you care about during interaction is the property:

checkbox.checked = true;

If a user clicks the checkbox later, the property tracks the current state directly. That is why the property is the right API for runtime behavior.

Form Validation Example

A practical example is forcing a required checkbox before submit:

1<form id="signupForm">
2    <input type="checkbox" id="terms">
3    <button type="submit">Create account</button>
4</form>

1document.getElementById('signupForm').addEventListener('submit', event => {
2    const terms = document.getElementById('terms');
3    if (!terms.checked) {
4        event.preventDefault();
5        alert('Please accept the terms first.');
6    }
7});

This checks the live state at the moment it matters most.

You can also combine a "select all" checkbox with a group of child checkboxes:

1const selectAll = document.getElementById('selectAll');
2const items = document.querySelectorAll('.item-box');
3
4selectAll.addEventListener('change', () => {
5    items.forEach(item => {
6        item.checked = selectAll.checked;
7    });
8});

That pattern appears frequently in admin tables, email clients, and bulk-action forms.

If the list is rendered dynamically, rerun the selector or use event-driven rendering code so the "select all" logic always sees the current set of checkboxes.

That prevents stale DOM references.

Common Pitfalls

One common mistake is changing the HTML attribute instead of the DOM property and expecting user-visible state to stay synchronized automatically.

Another issue is trying to read or write the checkbox before the element exists in the DOM.

A third problem is forgetting that checkbox groups often need loop-based logic instead of manually handling each element one by one.

Finally, some developers use JavaScript to force checkbox state when plain HTML form defaults or labels would already solve the UX problem more simply.

Summary

• Use checkbox.checked = true or false to check or uncheck a box.
• Toggle with checkbox.checked = !checkbox.checked.
• Use the change event when behavior depends on user interaction.
• For groups, use querySelectorAll and loop through the results.
• Prefer the live checked property over HTML attribute manipulation.
• Query the checkbox once and reuse that reference inside your handlers.