There is a such thing as an indeterminate checkbox value. It’s a checkbox (<input type="checkbox">) that isn’t checked. Nor is it not checked. It’s indeterminate.
We can even select a checkbox in that state and style it with CSS!
Some curious points though:
- It’s only possible to set via JavaScript. There is no HTML attribute or value for it.
- It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked.
So, say you had a form like this:
<form action="" method="POST" id="form">
<input name="name" type="text" value="Chris" />
<input name="vegetarian" type="checkbox" class="veg">
<input type="submit" value="Submit">
</form>And, for whatever reason, you make that checkbox indeterminate:
let veg = document.querySelector(".veg");
veg.indeterminate = true;If you serialize that form and take a look at what will POST, you’ll get "name=Chris". No value for the checkbox. Conversely, had you checked the checkbox in the HTML and didn’t touch it in JavaScript, you’d get "name=Chris&vegetarian=on".
Apparently, this is by design. Checkboxes are meant to be boolean, and the indeterminate value is just an aesthetic thing meant to indicate that visual “child” checkboxes are in a mixed state (some checked, some not). That’s fine. Can’t change it now without serious breakage of websites.
But say you really need to know on the server if a checkbox is in that indeterminate state. The only way I can think of is to have a buddy hidden input that you keep in sync.
<input name="vegetarian" type="checkbox" class="veg">
<input name="vegetarian-value" type="hidden" class="veg-value">let veg = document.querySelector(".veg");
let veg_value = document.querySelector(".veg-value");
veg.indeterminate = true;
veg_value.value = "indeterminate";I’ve set the indeterminate value of one input and I’ve set another hidden input value to "indeterminate", which I can POST. Serialized means it looks like "name=Chris&vegetarian-value=indeterminate". Good enough.
Source: CSS-tricks.com