JavaScript Checkbox Array: Get Selected Values

Checkboxes with the same name form a logical group. JavaScript can collect the group, filter the boxes whose checked property is true, and read their value properties.

const boxes = document.querySelectorAll('input[name="scripts"]');
const selected = [...boxes]
  .filter((box) => box.checked)
  .map((box) => box.value);
console.log(selected);

Create a Checkbox Group Top ↑

The original tutorial gives several checkboxes the same name. That idea is retained. If PHP must receive multiple submitted values, a name such as scripts[] is commonly used.

<label><input type="checkbox" name="scripts" value="JavaScript"> JavaScript</label>
<label><input type="checkbox" name="scripts" value="PHP"> PHP</label>
<label><input type="checkbox" name="scripts" value="HTML"> HTML</label>

Read Only the Selected Values Top ↑

The older page used document.form1.scripts.length and indexed access. That remains possible, but a selector avoids coupling the code to a form name.

const boxes = document.querySelectorAll('input[name="scripts"]');
let selected = [];
for (const box of boxes) {
  if (box.checked) {
    selected.push(box.value);
  }
}
console.log(selected.join(", "));

Use getElementsByName() Top ↑

const boxes = document.getElementsByName("scripts");
const selected = [...boxes]
  .filter((box) => box.checked)
  .map((box) => box.value);

See the getElementsByName() tutorial for the DOM method itself.

Validate the Group Before Processing Top ↑

The original demo checks a radio group and then requires at least one script checkbox. A modern submit listener keeps that behavior without inline event code.

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const gender = document.querySelector('input[name="gender"]:checked');
  const scripts = [...document.querySelectorAll('input[name="scripts"]:checked')];
  if (!gender) {
    alert("Please select a gender option.");
    return;
  }
  if (scripts.length === 0) {
    alert("Select at least one script.");
    return;
  }
  alert(scripts.map((box) => box.value).join("\n"));
});

Submit Multiple Checkbox Values to PHP Top ↑

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

JavaScript validation does not replace server-side validation. The existing PHP checkbox-array tutorial covers server-side handling.

Related Checkbox Controls Top ↑

Check or uncheck all · Limit checkbox selections · Checkbox validation

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: