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
Mylsamy 0 Newbie Poster
Airshow 416 WiFi Lounge Lizard Team Colleague
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
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.