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 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
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.
See the Pen Can you POST an intermediate value? by Chris Coyier (@chriscoyier) on CodePen.
checkedstate of the checkbox is masked by the
indeterminatestate of the checkbox. If the checkbox was checked when the indeterminate state was applied, the checkbox value will still be submitted with the form (example).
A css-tricksy way would be mocking up some radio buttons to look like a checkbox, something like this:
No value = indeterminate.