Demo: Limit Checkboxes with getElementsByName()

This version keeps the same three-selection limit but collects the group with getElementsByName().

Core JavaScript Top ↑

const boxes = [...document.getElementsByName("ckb")];
const limit = 3;
boxes.forEach((box) => {
  box.addEventListener("change", () => {
    const selected = boxes.filter((item) => item.checked);
    if (selected.length > limit) {
      box.checked = false;
    }
  });
});

getElementsByName() tutorial

← Checkbox limit tutorial Value-sum demo → Count-limit selector demo

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: