Check or Uncheck All Checkboxes with JavaScript

To select or clear a whole checkbox group, collect the group and assign the same Boolean value to each box’s checked property.

const boxes = document.querySelectorAll('input[name="check_list"]');
function setAll(checked) {
  boxes.forEach((box) => {
    box.checked = checked;
  });
}

If JavaScript is unavailable, the group controls will not run; the existing JavaScript support guide explains browser-side script support.

Use Separate Check All and Uncheck All Buttons Top ↑

<button type="button" id="checkAll">Check All</button>
<button type="button" id="uncheckAll">Uncheck All</button>

const boxes = document.querySelectorAll('input[name="check_list"]');
function setAll(checked) {
  boxes.forEach((box) => {
    box.checked = checked;
  });
}
document.getElementById("checkAll").addEventListener("click", () => setAll(true));
document.getElementById("uncheckAll").addEventListener("click", () => setAll(false));

Use One Master Checkbox Top ↑

The original page also uses one checkbox to manage a group. Copy the master checkbox’s state to every child checkbox.

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

When individual boxes can change, the master control can also use indeterminate to show partial selection.

Submitting the Selected Checkbox Group Top ↑

For a PHP form that receives multiple values, use a name such as check_list[]. The browser submits only checked, enabled checkboxes.

<label><input type="checkbox" name="check_list[]" value="PHP"> PHP</label>
<label><input type="checkbox" name="check_list[]" value="JavaScript"> JavaScript</label>

jQuery Alternative Top ↑

Native DOM APIs are sufficient for this task, but the original link to the jQuery checkbox tutorial remains useful for projects already using jQuery.

Related Checkbox Controls Top ↑

Single-control toggle patterns · Limit selections · Read selected values

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: