"Roger" <cr**************@cox.netwrote in message
news:4f*******************@newsfe10.phx...
>I have an application with an input form that sometimes has a hundred or so
check boxes organized into groups of about 10 choices. The boxes are
difficult to check because the target is small and after the user chooses a
dozen or so choices, the result is difficult to see.
I was thinking that an alternative would be to just have the single word
choices highlight after being checked. This would result in bigger
targets, denser forms, and would be easier to see.
Does anyone have any pointers to pages or examples that implement a
similar solution using CSS and Javascript?
Roger
check:
(make sure the checkbox and the label are on the same line and try clicking
the text as well!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
..unchecked{}
..checked{color:red; font-weight:bold;}
</style>
<script type="text/javascript">
function addEvent(obj, type, fn){
if (obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event);}
obj.attachEvent('on'+type, obj[type+fn]);
}else
obj.addEventListener(type, fn, false);
}
window.onload = function(){
var c = document.getElementsByTagName("input");
for (var i=0;i<c.length;i++){
if (c[i].getAttribute("type") == "checkbox"){
addEvent(c[i],"focus", function(){if
(this.checked){this.nextSibling.className="checked "; }else{this.nextSibling.className="unchecked";}});
addEvent(c[i],"click", function(){if
(this.checked){this.nextSibling.className="checked "; }else{this.nextSibling.className="unchecked";}});
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="check1"><label for="check1"
class="unchecked">checkbox1 text</label><br />
<input type="checkbox" id="check2"><label for="check2"
class="unchecked">checkbox2 text</label><br />
</form>
</body>
</html>