0

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?

Thanks,

Eagerly waiting
Myl

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Airshow
0

Myl,

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
</style>

<script>
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) {
		switch(x){
			case 0:
				tri.style.color = '#FFF';
				tri.style.backgroundColor = '#FFF';
			break;
			case 1:
				tri.style.color = '#000';
				tri.style.backgroundColor = '#FFF';
			break;
			case 2:
				tri.style.color = '#666';
				tri.style.backgroundColor = '#c0c0c0';
			break;
		}
		state = x;
	}
	var getState = function() { return state; }
	var incrementState = function() { setState((state+1)%3); }
	tri.onclick = incrementState;
	setState(0);
	//Public
	tri.setState = setState;
	tri.getState = getState;
	return tri;
} 

onload = function(){
	var tri = new TriCheckBox('myTriState');
};
</script>
</head>

<body>

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

</body>
</html>

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.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.