Alternative to Checkboxes and Radio Buttons - Click on Words thatHighlight

R

Roger

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
 
M

Marc

Roger said:
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.getAttribute("type") == "checkbox"){
addEvent(c,"focus", function(){if
(this.checked){this.nextSibling.className="checked"; }else{this.nextSibling.className="unchecked";}});
addEvent(c,"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>
 
R

Roger

Marc said:
Roger said:
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.getAttribute("type") == "checkbox"){
addEvent(c,"focus", function(){if
(this.checked){this.nextSibling.className="checked"; }else{this.nextSibling.className="unchecked";}});
addEvent(c,"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>


Thanks! Exactly what I needed.

Roger
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top