Toggle All Checkboxes with One Control

A single control can toggle an entire checkbox group. The control can be a button whose label changes, or a master checkbox whose checked state is copied to the group.

Toggle All with One Button Top ↑

const boxes = [...document.querySelectorAll('input[name="check_list"]')];
const toggle = document.getElementById("toggleAll");
toggle.addEventListener("click", () => {
  const check = !boxes.every((box) => box.checked);
  boxes.forEach((box) => { box.checked = check; });
  toggle.textContent = check ? "Uncheck All" : "Check All";
});

The original tutorial checks the button’s displayed value to decide what happens next. Deriving the action from the checkbox group avoids tying program state to button text.

Toggle All with One Checkbox Top ↑

const master = document.getElementById("master");
const boxes = document.querySelectorAll('input[name="check_list"]');
master.addEventListener("change", () => {
  boxes.forEach((box) => {
    box.checked = master.checked;
  });
});

Represent Partial Selection Top ↑

const count = boxes.filter((box) => box.checked).length;
master.checked = count === boxes.length;
master.indeterminate = count > 0 && count < boxes.length;

indeterminate is a visual state set by JavaScript. It is useful when only some child boxes are checked.

Choose the Appropriate Pattern Top ↑

• Use separate buttons when both actions should be explicit.
• Use a toggle button when one compact control is preferable.
• Use a master checkbox when it naturally represents “select all” for a list.

See the two-button and master-checkbox tutorial.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: