Alternative to Checkboxes and Radio Buttons - Click on Words that Highlight
Roger
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
Marc
"Roger" <crosseye...@cox.net> wrote in message
news:4fxNh.79075$115....@newsfe10.phx...
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>
Roger
Thanks! Exactly what I needed.
Roger