Using one radio-button to de-activate the rest.

[fambi]

Hi everyone,

Although i can float and doggy-paddle with JS, i am not able to go that deep so your assistance would be most appreciated.

I have a form with 7 groups of radio buttons and each group has 4 options. When any of group 7 is selected, i would like all the other groups to be disabled, but how do i go about it???

This is a simplified version of the form:

<form action="#" method="post">
<input name="a" value="i" type="radio">
<input name="a" value="m" type="radio">
<input name="a" value="n" type="radio">
<input name="a" value="w" type="radio">
<input name="b" value="n" type="radio">
<input name="b" value="i" type="radio">
<input name="b" value="m" type="radio">
<input name="b" value="w" type="radio">
<input name="c" value="n" type="radio">
<input name="c" value="i" type="radio">
<input name="c" value="m" type="radio">
<input name="c" value="w" type="radio">
<input name="d" value="n" type="radio">
<input name="d" value="i" type="radio">
<input name="d" value="m" type="radio">
<input name="d" value="w" type="radio">
<input name="e" value="n" type="radio">
<input name="e" value="i" type="radio">
<input name="e" value="m" type="radio">
<input name="e" value="w" type="radio">
<input name="f" value="n" type="radio">
<input name="f" value="i" type="radio">
<input name="f" value="m" type="radio">
<input name="f" value="w" type="radio">
<input name="all" value="n" type="radio">
<input name="all" value="i" type="radio">
<input name="all" value="m" type="radio">
<input name="all" value="w" type="radio">
</form>
So, when any of the 'all' options are selected, all of the other radio buttons should be disabled.

Thanks for your help all.

[dexfantasy]

I'm not 100% sure I know what you mean by "disable"... I assume you mean "uncheck" and not grey out the control completely. Here's a quick and dirty function that does the trick:

function uncheckRadioGrp() {
var args = uncheckRadioGrp.arguments;
var frm = args[0];
for ( var i=1; i<args.length; i++ )
for( var j=0; j<eval("frm." + args[i] + ".length"); j++ )
eval("frm." + args[i] + "[j].checked = false" );
}
So, in your HTML, simply create each radio button like this:

<form name="frm" action="#" method="post">
<input name="a" value="i" type="radio" onclick="uncheckRadioGrp(document.frm, 'b', 'c', 'd', 'e', 'f', 'all');">
...

Pass the form object followed by all the group names you'd like disabled as arguments.

Hope that helps.

Dex

[fambi]

Dirty indeed! Thank you very much, your function provided the crux for what i really needed.

Thanks again.

[Logic Ali]

function uncheckRadioGrp() {
var args = uncheckRadioGrp.arguments;
var frm = args[0];
for ( var i=1; i<args.length; i++ )
for( var j=0; j<eval("frm." + args[i] + ".length"); j++ )
eval("frm." + args[i] + "[j].checked = false" );
}


Unnecessary use of eval is discouraged.


function uncheckRadioGroups()
{
var args = arguments;
var frm = args[0];

for( var i=1; i < args.length; i++ )
for( var j=0; j < frm.elements[args[i]].length; j++ )
frm.elements[args[i]][j].checked = false;
}




So, in your HTML, simply create each radio button like this:

onclick="uncheckRadioGrp(document.frm, 'b', 'c', 'd', 'e', 'f', 'all');">
...


If I understand the requirement, 'all' should not be included but 'a' should.

In any case, ISTM that the functionality is defeated unless all the other groups are given a reciprocal handler to uncheck the 'all' group.

--

[dexfantasy]

Unnecessary use of eval is discouraged.


function uncheckRadioGroups()
{
var args = arguments;
var frm = args[0];

for( var i=1; i < args.length; i++ )
for( var j=0; j < frm.elements[args[i]].length; j++ )
frm.elements[args[i]][j].checked = false;
}




Thanks for the elements associative array tip... didn't know that existed. Definitely much better than eval for performance and readability :-)

Dex