How to check all yes radio button when you click top one yes button?

[q1234ask]

Hey,


I have a dynamic groups of yes no radio button.

on the top is one check all yes no radio button.

I need to have all the yes radio buttons below checked once you click on yes button on the top.

Each row has a yes no radio button which only allow either yes or no checked.

How can I do it? since the yes button is same as no button except the value is yes or no and
they have to use same name to group each row.

I try to use id to identify them, but the javascript seems does not work.

Thanks for any help.

like this code:

[code]<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0">
<TR><TD>Yes<BR><INPUT TYPE="radio" NAME="rball" VALUE="yesall"><BR></TD>
<TD WIDTH="6%">No<BR><INPUT TYPE="radio" NAME="rball" VALUE="noall"><BR></TD></TR>
<TR><TD><INPUT TYPE="radio" ID="rbrow1Y" NAME="rb1" VALUE="YES" ></TD>
<TD><INPUT TYPE="radio" ID="rbrow1N" NAME="rb1" VALUE="NO"></TD></TR>
<TR><TD><INPUT TYPE="radio" ID="rbrow2Y" NAME="rb2" VALUE="YES" ></TD>
<TD><INPUT TYPE="radio" ID="rbrow2N" NAME="rb2" VALUE="NO"></TD></TR>
</TABLE>[/code]

[micah1701]

Here you go:
[code]<script type="text/javascript">
function checkAll(yes){
if(yes){
  document.getElementById('rbrow1Y').checked = true;
  document.getElementById('rbrow2Y').checked = true;
}else{
  document.getElementById('rbrow1N').checked = true;
  document.getElementById('rbrow2N').checked = true;
}
}
</script>

<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0">
<TR>
<TD>Yes<BR><INPUT TYPE="radio" NAME="rball" VALUE="yesall" onClick="checkAll(true)"><BR></TD>
<TD WIDTH="6%">No<BR><INPUT TYPE="radio" NAME="rball" VALUE="noall" onClick="checkAll(false)"><BR></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" ID="rbrow1Y" NAME="rb1" VALUE="YES" ></TD>
<TD><INPUT TYPE="radio" ID="rbrow1N" NAME="rb1" VALUE="NO"></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" ID="rbrow2Y" NAME="rb2" VALUE="YES" ></TD>
<TD><INPUT TYPE="radio" ID="rbrow2N" NAME="rb2" VALUE="NO"></TD>
</TR>
</TABLE>[/code]

[nogray]

If your radio buttons are dynamic, tracking the ids will be a lot more work. Here is a simple solution that doesn't require ids (only the values 'YES' and 'NO')

[code]
<script language="javascript">
    function checkAll(val){
        var radioBtns = document.getElementsByTagName('INPUT');
        
        for(i=0; i<radioBtns.length; i++){
            if((radioBtns[i].type == "radio") && (radioBtns[i].value == val)){
                radioBtns[i].checked = true;
            }
        }
    }
</script>

<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0">
<TR><TD>Yes<BR>

<INPUT TYPE="radio" NAME="rball" VALUE="yesall" onClick="checkAll('YES');">

<BR></TD>
<TD WIDTH="6%">No<BR>

<INPUT TYPE="radio" NAME="rball" VALUE="noall" onClick="checkAll('NO');">

<BR></TD></TR>
<TR><TD><INPUT TYPE="radio" ID="rbrow1Y" NAME="rb1" VALUE="YES" ></TD>
<TD><INPUT TYPE="radio" ID="rbrow1N" NAME="rb1" VALUE="NO"></TD></TR>
<TR><TD><INPUT TYPE="radio" ID="rbrow2Y" NAME="rb2" VALUE="YES" ></TD>
<TD><INPUT TYPE="radio" ID="rbrow2N" NAME="rb2" VALUE="NO"></TD></TR>
</TABLE>[/code]