[marusin]

Hey all,

Just wondering if anyone has code that will allow me to treat a series of checkboxes like a radio button (in javascript). An example is below (the < and > are removed so you can see the code without it formatting as HTML):

Code:
input type='checkbox' id='cb100000' value='0'
input type='checkbox' id='cb100000' value='1'
input type='checkbox' id='cb100000' value='2' checked

input type='checkbox' id='cb100001' value='0'
input type='checkbox' id='cb100001' value='1'
input type='checkbox' id='cb100001' value='2' checked

I want to put an onClick event in each of these checkboxes so that if one is checked within the group, any other choices are unselected (just like a radio button). The reason we're using checkboxes rather than radio buttons is that we want the user to be able to not select any of the choices as well.

Anyone have some example code on how to do this? I have a zillion things going on and would love some help on this...

Thanks!

[wallinbl]

Here is some code that we use as a 'Check All' function. It checks all checkboxes on the form that start with 'Sale' or 'Cust'. It should be trivial to modify it to allow you to pass an ID value in and compare it instead of using the name.

('UserForm') is the name of the form we are using - change it as necessary).

<font face=Courier>
function selectAll() {
// set var to form element
var f = document.forms('UserForm');
// loop through all form elements
for (i=0; i < f.length; i++) {
var chk = f.item(i);
var chkName = chk.name.substring(0,4);
// check only if SalesTerritory, SalesPerson, or CustClass
if (chk.type == 'checkbox' && (chkName == 'Sale' || chkName == 'Cust'))
{ chk.checked = true; }
}
return false;
}
</font>

[marusin]

Hey wallinbl, thanks for the help... Much appreciated...

[Millennium]

Why not just use radio buttons, rather than altering the behavior of a well-understood user interface element and consequently shooting the usability of your site in the foot?

[marusin]

Probably because people need to have the option of selecting a choice and be able to retract it and select nothing within a group of IDs. With radio buttons, once it's checked one of the options has to always be checked... You cannot "uncheck" a radio button unless you "alter the behavior of a well-understood user interface element and consequently shoot the usability of your site in the foot"...

Originally posted by Millennium:
Why not just use radio buttons, rather than altering the behavior of a well-understood user interface element and consequently shooting the usability of your site in the foot?

[hyperizer]

Why not have one radio button next to a "none" label?

[Simon Mundy]

Originally posted by hyperizer:
Why not have one radio button next to a "none" label?

LOL. Since when did logic become a part of UI design?

Seriously, though, Marusin - I'd listen to the guys about this one instead of getting defensive. There's good reason not to break with some conventions. What if a user had javascript disabled? What if your code broke?

Using the standard input methods saves time, is easier on the user and much quicker to code for. ESPECIALLY if you've got a zillion things to do.

[redJag]

Seriously, though, Marusin - I'd listen to the guys about this one instead of getting defensive. There's good reason not to break with some conventions.

I wouldn't really classify his reply as defensive. More like a RESPONSE. Anywho, maybe he has a contained userbase that he knows will understand what he is doing. Writing code to make checkboxes function similarly to radio buttons is not a bad idea at all.

[marusin]

Actually the reason I'm using checkboxes instead of radio buttons is because I have to follow a standard (for an extremely large corporation) that does not want radio buttons throughout their site... With that said, I'm also developing for IE 5.5 on the Windows Platform because it is for their intranet and they have a locked-down desktop (therefore JavaScript will always be enabled, etc)...

Thanks for all your suggestions regarding using radio-buttons, etc but this is a case where it has to be done "one specific way" and there's no arguing with the client over the "proper way"...

[DeathMan]

Stupid stupid stupid. Whoever wrote those guidelines should be drug out into the street and shot by Jakob Neilson himself.

Why would you do this to a user? Why make a stupid rule like: no radio buttons?

Stupid.

[redJag]

I never call someone that is paying me stupid..




...not to their face

[Simon Mundy]

Originally posted by redJag:
I never call someone that is paying me stupid..

...not to their face

Oh, but you MUST! It is extremely satisfying under the right conditions