Radio Buttons Accross Multiple Forms

I have an admin page where I can see every product in my store sorted into groups (their categories). Each product has it's own form with checkboxes for changing attributes and a submit button for setting them.

My problem is that there is one attribute that only one product per category can have. But since each product has it's own form, even if each has a radio button with the same name, multiple boxes may be selected.

This is a rough XML style explanation of the page structure:

<category1>
<form>
<product1>
<radio1>
</product1>
</form>
<form>
<product2>
<radio1>
</product2>
</form>
<form>
<product3>
<radio1>
</product3>
</form>
</category1>

<category2>
<form>
<product4>
<radio2>
</product4>
</form>
<form>
<product5>
<radio2>
</product5>
</form>
</category2>So I am looking for some javascript which will un-check all other radio buttons within that cagetory. The data is dynamically generted so the number of pruducts (and therefor radio buttons) can change. I can give forms in the same category the same name though if we need a way for the javascript to identify them.

Thanks a lot, I appreciate your help.

If the radio buttons have the same name, the check of one of them will automatically disable the check on other, this might be a simple HTML solution of your problem. If you have to submit the result, give different values (even the same name), and that will do the job.

The simpliest JavaScript way to identify the forms elements is

document.forms[i].elements[j]

where i and j are positive integer numbers from 0, and shows the forms/elements order in page from top to bottom.

To check/uncheck a radio button you have to use true and false boleean operators and to evaluate the state of the check situation


function check_uncheck(form_name,check_name,state){
var elemgroup=eval("document.forms."+form_name+"."+check_name)
for j=0;j<elemgrop.length;j++)
elemgroup[j].checked=state
}


Now, if u use an event, you may specify the state you want for the whole group:

To uncheck:

<tag onevent="check_uncheck(form_name,check_name,false)">

To check:

<tag onevent="check_uncheck(form_name,check_name,true)">