three state checkbox

does anyone knows how to create a three state checkbox?
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

clockwatcherConnect With a Mentor Commented:
This is really worth a bit more than 40 points, but since I'm feeling generous and a bit bored I decided to go ahead and write it up for you.  ;-)

Basically, you have to do it by hand.  IE 4 supports the indeterminate property on the checkbox, but it's kind of pointless-- as it's not cross-browser and it doesn't change the underlying value of the checkbox.

The by-hand method involves creating your own checkbox images and using javascript to swap images on click.  You keep track of the true checkbox state in a hidden variable.  It's posted at:

You can download the images, page, and handler all zipped up at:

Here's the code to handle the checkbox logic (it's included in the above zip, but posted here for anyone that's interested):

<script language="javascript"><!--

// Preload checkbox images

var checkbuttons = new Array(new Image(), new Image(), new Image())
checkbuttons[0].src = "clear.gif";
checkbuttons[1].src = "checked.gif";
checkbuttons[2].src = "gray.gif";

function changeButtonState(myElementName, myImgName) {

  var myImage = document.images[myImgName];
  var myElement = document.myForm.elements[myElementName];
  if (myElement.value > 2) { myElement.value = 0; }
  myImage.src = checkbuttons[myElement.value].src;
  return false;

function ensureProperImages(myThreeStateBoxes) {
// Make sure checkboxes have the proper images if back button was pressed
  for (var i=0; i < myThreeStateBoxes.length; i = i + 2) {
     document.images[myThreeStateBoxes[i+1]].src = checkbuttons[document.myForm.elements[myThreeStateBoxes[i]].value].src;
// -->

<body onload="ensureProperImages(new Array('threestates', 'box1picture', 'difficulty', 'box2picture'));">
<form name="myForm" method="post" action="handler.asp">
<input name="threestates" type="hidden" value="0">
<a href="javascript:;" onclick="changeButtonState('threestates', 'box1picture'); return false;"><img src="clear.gif" border=0 name="box1picture"></a>
 Three states<br><br>
<input name="difficulty" type="hidden" value="0">
<a href="javascript:;" onclick="changeButtonState('difficulty', 'box2picture'); return false;"><img src="clear.gif" border=0 name="box2picture"></a> Was that easy or what?
<br><br><input type="submit">
All Courses

From novice to tech pro — start learning today.