Using tri-state checkboxes in HTML

18 June 2012, by

a partially-selected tree of checkboxesSometimes you find yourself requiring a third state for checkboxes to show ‘partially selected’. In the bad old days, if you needed to implement this (or other complex checkbox behaviour) on a web page you had no choice but to make fake checkboxes using clickable images. This meant you had to reimplement any other checkboxes on your site using the same clickable images to keep a consistent look-and-feel.

However, nowadays most browsers support a native third ‘indeterminate’ state for checkboxes as a DOM property:

  • Internet Explorer 6+ (or maybe even further back)
  • Firefox 3.6+ (but not 3.0 or 3.5)
  • Chrome, all versions I can find
  • Opera 11+ (but not 10)
  • Safari (on Mac and iPhone at least).

This is a large enough proportion of browsers to consider using this on your website. And if you need to fall-back to images for browsers outside of this set then you can detect support easily at run-time using JavaScript. There’s one catch, which is that the property is present for Safari for Windows, but it is effectively unusable there because of a rendering bug, so Safari for Windows should be treated as not having support. (I have reported the bug, so hopefully it will be fixed in later versions.)

I have posted two code snippets on GitHub:

Indeterminate checkboxes demo

Click for a demo of checkbox trees using image-based and native checkboxes

Tags: , ,

Categories: Technical


Leave a Reply

* Mandatory fields

9 − = three

Submit Comment