HTML Checkboxes: Multiple Values, required, and indeterminate
HTML <input type="checkbox"> lets each option be selected or cleared independently. Only checked boxes submit their name and value; an unchecked option is omitted from the submitted data rather than sent as false or an empty string.
Read multiple values with the same name
Unlike radio buttons, checkboxes with the same name can be selected together. Their values repeat under one name, so read all of them. Use getAll on a JavaScript FormData instance, and check your server framework’s rules for handling multiple values.
name identifies the field; value is what it submits when selected. Omitting value uses the default string on, so specify values to distinguish options. Give every checkbox a unique id for its label.
Complete example: multiple selection, required checks, and excluded entries
Save this code as checkbox-demo.html and open it in a browser. It displays the actual form entries instead of sending them to a server. Compare how a disabled option is excluded even when checked.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checkbox submission values</title>
<style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
<h1>Checkbox practice</h1>
<form id="demo">
<fieldset>
<legend>Preferred colors (multiple selection)</legend>
<input type="checkbox" id="blue" name="color" value="blue" checked>
<label for="blue">Blue</label>
<input type="checkbox" id="red" name="color" value="red">
<label for="red">Red</label>
<input type="checkbox" id="locked" name="color" value="green" checked disabled>
<label for="locked">Green (disabled)</label>
</fieldset>
<p>
<input type="checkbox" id="ready" name="ready" value="yes" required>
<label for="ready">Ready for practice (required)</label>
</p>
<button type="submit">Show values</button>
<button type="reset">Reset</button>
<button type="button" id="partial">Show Blue as partially selected</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
const blue = document.getElementById('blue');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
});
document.getElementById('partial').addEventListener('click', () => {
blue.indeterminate = true;
});
form.addEventListener('reset', () => {
result.textContent = '';
blue.indeterminate = false;
});
</script>
</body>
</html>- Submit without selecting the readiness checkbox: required validation blocks submission.
- Select readiness and Red, then submit. The output contains color=blue, color=red, and ready=yes; disabled Green is excluded.
- Clear Blue and Red and submit again. No color entry remains; only ready is present.
- Reset restores Blue and Green to checked, while Red and readiness return to unchecked.
Distinguish checked, required, and indeterminate
The checked attribute gives the initial selection. Read the current state using the JavaScript checked property. checked="false" still has the attribute present; omit it for an initially unchecked box. Reset restores the initial values instead of clearing every box.
A checkbox with required must itself be checked. It does not mean that any one checkbox sharing the same name is enough. An “at least one of these” condition needs separate validation and guidance.
indeterminate is a JavaScript property that displays a partial-selection state. It is not set through an HTML attribute and is independent of checked, which determines submission. After resetting, press the partial-display button, select the required readiness box, and inspect the values: blue is still submitted. The partial display does not clear checked or create a third submitted value.
Handle missing and multiple values on the server
Treating every missing unchecked option as an error, or reading only the last value of a repeated name, can change the intended meaning. Distinguish “nothing selected” from an invalid request using your application’s rules, and validate allowed values on the server.
PHP can receive name="color[]" as an array, but this follows the server parser’s rules. A browser does not send a universal array object for every programming language. Check that the received value is an array, and handle missing values, nested arrays, and disallowed values. See the PHP documentation on external variables for parsing rules and the MDN checkbox reference for checkbox behavior.
