Limit Checkbox Selections with JavaScript

The original explanation uses an alert message when a selection exceeds the rule. Modern examples below also provide inline feedback where practical.

JavaScript can enforce a rule such as “select no more than three.” Count the checked boxes after each change; if a new selection exceeds the limit, undo that selection and show a clear message.

const boxes = [...document.querySelectorAll('input[name="skills"]')];
const maxSelections = 3;
boxes.forEach((box) => {
  box.addEventListener("change", () => {
    const selected = boxes.filter((item) => item.checked);
    if (selected.length > maxSelections) {
      box.checked = false;
      alert("Please select no more than three.");
    }
  });
});

Maximum-count demo getElementsByName() demo Maximum-value demo

Limit the Number of Selected Checkboxes Top ↑

The original example passes the last-clicked checkbox index into chkcontrol(). A modern event listener already knows which checkbox changed, so it can undo that specific selection directly.

const boxes = [...document.querySelectorAll('input[name="ckb"]')];
const limit = 3;
boxes.forEach((box) => {
  box.addEventListener("change", () => {
    const total = boxes.filter((item) => item.checked).length;
    if (total > limit) {
      box.checked = false;
      alert("Please select only three.");
    }
  });
});

Use getElementsByName() for the Same Rule Top ↑

const boxes = [...document.getElementsByName("ckb")];
const selectedCount = boxes.filter((box) => box.checked).length;

See getElementsByName() for more on that DOM method.

Limit Selection by the Sum of Checkbox Values Top ↑

Sometimes the count is not the rule. Each checkbox can carry a numeric value and the total may need to remain under a maximum.

const boxes = [...document.querySelectorAll('input[name="ckb"]')];
const maximum = 10;
boxes.forEach((box) => {
  box.addEventListener("change", () => {
    const sum = boxes
      .filter((item) => item.checked)
      .reduce((total, item) => total + Number(item.value), 0);
    if (sum > maximum) {
      box.checked = false;
      alert("The total cannot exceed 10.");
    }
  });
});

Number() converts the control value from a string to a number. The original page used parseInt(), which remains useful when integer parsing is specifically intended.

Give Users Clear Feedback Top ↑

Show the rule before the choices and provide a live count or total where useful. An alert alone should not be the only explanation.

Repeat the Rule on the Server Top ↑

Client-side limits improve interaction but can be bypassed. The server must validate the count or total again before accepting submitted data. The existing PHP checkbox tutorial covers server-side handling.

Related Checkbox Examples Top ↑

Read selected values · Check/uncheck all · Multiple-selection listbox · Checkbox validation · jQuery data-matrix restrictions

Checkbox selection limits reference

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: