Friday, February 6th, 2009

document.getElementById(“check1”).indeterminate = true; Now shipping in Firefox Trunk

Category: Firefox, HTML, Mozilla, Standards

Michael Ventnor posted about his implementation of the indeterminate state that is specified in HTML5 for checkboxes and radio buttons:

If you do any web development, chances are you know checkboxes and radio buttons can have two states: checked and unchecked. But in the case of checkboxes, you may want to indicate to the user that they are half-way between those states, for example when you have a master checkbox above many other checkboxes of singular items. This is now possible on Trunk (Firefox 3.2) thanks to the implementation of the HTML5 “indeterminate” DOM property. All it takes is a bit of script:


  1. document.getElementById(”check1?).indeterminate = true;

Now you can see if the sub-glass is half full. CSS3 :indeterminate pseudoclass isn’t there yet…. but check back tomorrow.

Posted by Dion Almaer at 6:40 am

3.3 rating from 28 votes


Comments feed TrackBack URI


are you sure? questionmark as end of a string?

Comment by Aimos — February 6, 2009

I detest three-state checkboxes. Needing them is a sure sign of a bad ui design.

Comment by Joeri — February 6, 2009

@Jeori: tri-state boxes are fairly common way of declaring state information within a parent item. I would suspect that they’re well understood now but would love to see some user testing on that. Like you say though, design may be a consideration.

Comment by jonathansnook — February 6, 2009

I am would the CSS3 :indeterminate pseudoclass be a way to set the style of the checkbox and not set if a check should be in an indeterminate state ?

Comment by howardrauscher — February 6, 2009

IMO, the above blog post doesn’t really do a good job of explaining what “indeterminate” actually means. I had to google up this MSDN page to actually figure out what was being discussed:

Now that I (think I) understand what’s being discussed, I’m pretty sure this is not a good idea. A checkbox is either checked or unchecked. Whether a user has actively interfaced with a form element doesn’t really change this fact. If you set meaningful defaults in your form, you should have no use for this.

In the “Check All” example, the “indeterminate” state is suggested as ideal for when the “Check All” is not checked but some of the “child” checkboxes are. Since only some of the child boxes are checked, the “Check All” itself is KNOWN to be *unchecked* not indeterminate. The current paradigm is well known and understood by current users and the only thing added by an indeterminate state is confusion.

Like many others I’ve written javascript to handle the “Check All” control, in which a user manually checking all the children checkboxes automatically checks the “Check All” box as well. Or, if you want to earn some bonus points with your boss, have the original state of the child checkboxes restored when “Check All” is checked then unchecked (eg, half of the boxes are checked, you click Check All then uncheck Check All and instead of none of them being checked, half of them are).

Why not add this behavior to HTML5 so we don’t need to code it by hand? That would be far more helpful than tacking on bizarre features like “indeterminate”.

We should be working to simplify webforms to make them more accessible and easier to use, not adding complexity for its own sake.

Comment by drlongghost — February 7, 2009

I like it
I like it
I like it
nice and simple

Comment by RawChocolate — July 30, 2009

Leave a comment

You must be logged in to post a comment.