POSTing an Indeterminate Checkbox Value

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.

See the Pen Can you POST an intermediate value? by Chris Coyier (@chriscoyier) on CodePen.

Thomas Higginbotham

# October 15, 2018

Instead of creating an extra hidden form control, I think I’d prefer to set the value of the checkbox. Since you’re using JavaScript to make it indeterminate, you may as well use JavaScript to change its state to checked when the form is submitted, so that it sends its value.

const form = document.querySelector('form');
const checkbox = document.querySelector('input[type=checkbox]');

checkbox.indeterminate = true;
checkbox.value = 'indeterminate';

form.addEventListener('submit', () => {
  if (checkbox.indeterminate) {
    checkbox.checked = true;
  } else {
    checkbox.value = 'on';
  }
}, false);

zzzzBov

Minor nitpick:

It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked.

The checked state of the checkbox is masked by the indeterminate state 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).

Emil

A css-tricksy way would be mocking up some radio buttons to look like a checkbox, something like this:

No value = indeterminate.

Comments