How do you group multiple checkboxes under the same name to collect multiple values?

How to group multiple checkboxes under the same name to collect multiple values, complete with examples, explanations, best practices, pitfalls, and code.
Forms are one of the most important elements of any web application. Whether you are creating a survey, a product filter system, a registration form, or a settings page, you often need to allow users to select more than one option. Checkboxes are specially designed for this purpose—they allow multiple selections. But to collect these selections properly, especially when sending form data to the server, you must know how to group multiple checkboxes under the same name.
This long-form article explains why grouping matters, how HTML treats checkboxes, the role of the name attribute, how backend scripts receive checkbox values, and the correct way to structure your code. You'll also learn about JavaScript retrieval, form serialization, common mistakes, and accessibility tips.
Let’s begin with the core question.
Why Group Checkboxes Under the Same Name?
In HTML forms, the name attribute determines how data is sent to the server. For radio buttons (single selection), all options under the same name send one value. But checkboxes can allow multiple values, and grouping them under the same name tells the browser:
“If multiple boxes with the same name are checked, send all their values as part of the same group.”
This means your backend (PHP, Node.js, Python, etc.) can treat them as a list or an array.
Without grouping, each checkbox would be treated individually, making processing far more difficult.
Basic Syntax: Grouping Checkboxes with the Same Name
Here’s the simplest example:
<form action="submit.php" method="POST">
<label><input type="checkbox" name="fruits[]" value="apple"> Apple</label>
<label><input type="checkbox" name="fruits[]" value="banana"> Banana</label>
<label><input type="checkbox" name="fruits[]" value="mango"> Mango</label>
<button type="submit">Submit</button>
</form>
JavaScriptWhy use fruits[] instead of fruits?
The [] (square brackets) tell your backend:
✔ Multiple values
✔ Treat them as an array
✔ Handle them as grouped input
This is widely used in PHP, Node.js, Python Flask, and other backend frameworks.
How the Browser Sends the Data
If a user checks Apple and Mango, the browser sends:
fruits[]=apple
fruits[]=mango
JavaScriptThe server receives it like:
$_POST['fruits'] = ['apple', 'mango'];
JavaScriptor in Node.js (Express):
req.body.fruits // ["apple", "mango"]
JavaScriptor in Flask/Python:
request.form.getlist('fruits[]')
JavaScriptExample with Fieldset and Legend (More Semantic HTML)
For accessibility and structure, you can wrap grouped checkboxes in a fieldset:
<form>
<fieldset>
<legend>Select Your Hobbies</legend>
<label><input type="checkbox" name="hobbies[]" value="reading"> Reading</label>
<label><input type="checkbox" name="hobbies[]" value="traveling"> Traveling</label>
<label><input type="checkbox" name="hobbies[]" value="cooking"> Cooking</label>
</fieldset>
<button type="submit">Submit</button>
</form>
JavaScriptUsing fieldset helps assistive technologies like screen readers, making your form more accessible.
How JavaScript Reads Multiple Checkbox Values
Sometimes you need to handle the values before sending them to the server (for validation, dynamic filtering, showing results instantly, etc.).
Here is the pure JavaScript approach:
<script>
function getCheckedValues() {
const checkboxes = document.querySelectorAll('input[name="colors[]"]:checked');
let values = [];
checkboxes.forEach(checkbox => {
values.push(checkbox.value);
});
console.log(values);
}
</script>
<label><input type="checkbox" name="colors[]" value="red"> Red</label>
<label><input type="checkbox" name="colors[]" value="green"> Green</label>
<label><input type="checkbox" name="colors[]" value="blue"> Blue</label>
<button onclick="getCheckedValues()">Show Selected Colors</button>
JavaScriptOutput example:
["red", "green"]
JavaScriptThis is extremely useful when building filters (e-commerce sites, dashboards, analytics panels, etc.).
Using JavaScript FormData to Collect Checkbox Arrays
Modern web apps often use FormData to process forms via AJAX:
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.getAll("skills[]"));
JavaScriptIf your checkboxes look like:
<input type="checkbox" name="skills[]" value="html">
<input type="checkbox" name="skills[]" value="css">
<input type="checkbox" name="skills[]" value="javascript">
JavaScriptgetAll() returns:
["html", "css"]
JavaScriptCheckbox Grouping Without Brackets ([]): Can You Do It?
Technically, yes… but not recommended.
Example:
<input type="checkbox" name="fruit" value="apple">
<input type="checkbox" name="fruit" value="banana">
JavaScriptDepending on the backend language:
- Some servers take only the last checked value
- Some take only the first
- Some take none
- Some merge them inconsistently
This inconsistency is why developers use [] to indicate an array.
Adding IDs for Better Accessibility
Without using <label> tied to an id, users must click directly on the tiny checkbox. Improve UX like this:
<input type="checkbox" id="apple" name="fruits[]" value="apple">
<label for="apple">Apple</label>
JavaScriptThis improves:
- accessibility
- clickable area
- usability on mobile
Styling Groups of Checkboxes with CSS
Checkboxes can be styled for better layout control.
Example: vertical list:
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
}
JavaScriptHTML:
<div class="checkbox-group">
<label><input type="checkbox" name="pets[]" value="dog"> Dog</label>
<label><input type="checkbox" name="pets[]" value="cat"> Cat</label>
<label><input type="checkbox" name="pets[]" value="bird"> Bird</label>
</div>
JavaScriptHow Back-End Languages Handle Grouped Checkboxes
PHP Example
$selected = $_POST['items']; // array
foreach($selected as $item){
echo $item . "<br>";
}
JavaScriptNode.js / Express
app.post("/submit", (req, res) => {
console.log(req.body.languages); // array
});
JavaScriptPython Flask
selected = request.form.getlist("topics[]")
print(selected)
JavaScriptASP.NET
var values = Request.Form.GetValues("services[]");
JavaScriptCommon Mistakes When Grouping Checkboxes
❌ Mistake 1: Forgetting the Square Brackets
name="options"
JavaScriptResult: only one value is captured.
✔ Correct:
name="options[]"
JavaScript❌ Mistake 2: Using Different Names
This breaks grouping:
name="option1"
name="option2"
name="option3"
JavaScript❌ Mistake 3: Not Using Values
This sends "on" instead of the intended data:
<input type="checkbox" name="colors[]">
JavaScript✔ Correct:
<input type="checkbox" name="colors[]" value="red">
JavaScriptCreating an Advanced Grouped Checkbox Form
Here is a more realistic example with multiple categories:
<form>
<fieldset>
<legend>Select Your Interests</legend>
<h4>Sports</h4>
<label><input type="checkbox" name="interests[]" value="football"> Football</label>
<label><input type="checkbox" name="interests[]" value="cricket"> Cricket</label>
<label><input type="checkbox" name="interests[]" value="tennis"> Tennis</label>
<h4>Music</h4>
<label><input type="checkbox" name="interests[]" value="rock"> Rock</label>
<label><input type="checkbox" name="interests[]" value="jazz"> Jazz</label>
<label><input type="checkbox" name="interests[]" value="classical"> Classical</label>
<h4>Technology</h4>
<label><input type="checkbox" name="interests[]" value="ai"> AI</label>
<label><input type="checkbox" name="interests[]" value="robotics"> Robotics</label>
<label><input type="checkbox" name="interests[]" value="programming"> Programming</label>
</fieldset>
<button type="submit">Submit</button>
</form>
JavaScriptAll checkboxes share:
name="interests[]"
JavaScriptThus, the backend receives a full list of all checked items.
JavaScript: Getting Grouped Checkbox Values Real-Time
This is useful for live search filters.
document.querySelectorAll('input[name="category[]"]').forEach(cb => {
cb.addEventListener("change", () => {
const selected = [...document.querySelectorAll('input[name="category[]"]:checked')].map(x => x.value);
console.log(selected);
});
});
JavaScriptAdding Required Rule (At Least One Must Be Checked)
HTML does not support “at least one checkbox must be selected,” but JavaScript can enforce it:
function validateCheckboxGroup() {
const checked = document.querySelectorAll('input[name="courses[]"]:checked');
if (checked.length === 0) {
alert("Please select at least one course.");
return false;
}
return true;
}
JavaScriptUsage:
<form onsubmit="return validateCheckboxGroup()">
JavaScriptWhy Grouping Checkboxes Enhances UX and Backend Logic
✔ Makes data easier to process
✔ Follows HTML form standards
✔ Helps backend frameworks handle arrays automatically
✔ Improves readability of form code
✔ Supports scalable interfaces (such as filters)
✔ Works better with JavaScript and AJAX
Conclusion
Grouping multiple checkboxes under the same name is essential when you want users to select more than one option. The name="example[]" pattern ensures that all checked values are collected and passed to the server as an array. This method is reliable, clean, and compatible with all major backend languages.


