Hi all,

I want to built tristate checkbox using Javascript.

There is lot of examples for this problem.. All have processed with Images.

But I want to use this with out image.

Can anybody help me out of this problem?


Eagerly waiting


You can do something like this (it's very rudimentary) ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>Airshow :: Untitled</title>
<style type="text/css">

function TriCheckBox(elementID){
	if(!elementID) { return null; }
	var el = document.getElementById(elementID);
	var tri = document.createElement('span');
	el.parentNode.replaceChild(tri, el);
	tri.style.border = '1px solid #000';
	tri.style.fontSize = '10pt';
	tri.style.fontFamily = 'monospace';
	tri.style.padding = '0 4px';
	tri.style.lineHeight = '5px';
	tri.innerHTML = "X";
	if(!tri) { return null; }
	var state = 0;
	var setState = function(x) {
			case 0:
				tri.style.color = '#FFF';
				tri.style.backgroundColor = '#FFF';
			case 1:
				tri.style.color = '#000';
				tri.style.backgroundColor = '#FFF';
			case 2:
				tri.style.color = '#666';
				tri.style.backgroundColor = '#c0c0c0';
		state = x;
	var getState = function() { return state; }
	var incrementState = function() { setState((state+1)%3); }
	tri.onclick = incrementState;
	tri.setState = setState;
	tri.getState = getState;
	return tri;

onload = function(){
	var tri = new TriCheckBox('myTriState');


<input id="myTriState" type="checkbox"> Tristate


I can see why people choose to use images. You can't reliably display a tick as it depends on the availability of a suitable font (I used "X"). In addition, the TriCheckBox displays better in FF than IE.

I reckon that a good graphic version will always be better however hard I try to improve on my attempt.