Using tri-state checkboxes in HTML
18 June 2012, by Rupert Wood
Sometimes 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).
I have posted two code snippets on GitHub: