Jump to content

Archived

This topic is now archived and is closed to further replies.

q1234ask

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

Recommended Posts

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]

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.