473,322 Members | 1,494 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Alternative to Checkboxes and Radio Buttons - Click on Words thatHighlight

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
Mar 25 '07 #1
2 3303

"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>
Mar 25 '07 #2
Marc wrote:
"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>

Thanks! Exactly what I needed.

Roger
Mar 25 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Newbie | last post by:
I currently have a set of simple calculations to determine square footage and multuply that by a dollar amount per foot. I use form fields that are filled in by the user, and then the Submit...
9
by: Gary | last post by:
Hello, Is it possible to dynamically update a textbox with words chosen from a list using form checkboxes and javascript? Gary
9
by: sergio | last post by:
Hi all, I have created the following script that will show/hide a menu based on checkboxes. It works fine in Opera but not on IE6! Does anybody knows a workaround this problem? Thanks for your...
1
by: sman | last post by:
Hi, I recently read this article on About.com on how to create required fields for a form: http://javascript.about.com/library/scripts/blformvalidate.htm Everything works great except that there...
2
by: Glenn | last post by:
The following script is supposed to have high categories as radio buttons and mid categories as check boxes. Clicking the radio button is supposed to select all checkboxes under it and submit the...
3
by: Scott | last post by:
Relative newbie here, I'm looking to display the value of radio buttons and check boxes on the page before submission. So far I can do most of it. When "Hat" is checked there are to be no color...
12
html on wheels
by: html on wheels | last post by:
Greeting sports fans. In order to ask multiple questions and not have your radio buttons jump from one question to the next, what do you type to create a break between them. I am trying to complete a...
2
by: forbes | last post by:
Hi, I have a form that contains multiple groups of checkboxes that act like radio buttons (at the clients insistance). There is one text field that is required and 28 checkbox groups. Here an...
2
by: leifstarkey | last post by:
Hi all... My problem is I'm trying to make a form containing radio buttons and checkboxes. But on the event that one of the radio buttons is selected i want specific checkboxes to then be...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.