Friday, December 19, 2008

Tri-State Checkbox using Javascript

Recently I noticed how yahoo mail select all check box only shows two
states while selecting/un-selecting mails to perform various actions.
So I decided to experiment and create a simple tri-state check box that could display my intermediate state. Below is what I ended up with:

Tri-State Checkbox Demo with dependent checkboxes

Select/Unselect All






It's really simple to use. Here's what you have to do:
  1. Include the javascript file in your html
  2. Have a place-holder node (span in my case) to hold the image for the tri-state box
  3. Place the related checkboxes inside a container, e.g. a div
  4. Invoke the initTriStateCheckBox(<place holder id>, <container id>, false) function in your html

Standalone Tri-State Checkbox Demo

I liked this
(Maybe/Yes/No)

Here's what you have to do to create a standalone one:
  1. Include the javascript file in your html
  2. Have a place-holder node (span in my case) to hold the image for the tri-state box
  3. Create a hidden field to hold the state of the box
  4. Invoke the initTriStateCheckBox(<place holder id>, <hidden field id>, true) function in your html


The zip file containing the javascript, images and a sample is available here. It is also a GitHub project set up by Michal Letynski.

--

42 comments :