Hide/Show Radio Buttons

Hi,

I’m working on a form where the user has 3 options (radio buttons) to pick from. Once one of the radio buttons is picked, there are another set of radio buttons that also needs to be selected.

I would like all the second options to be hidden and only appear when that particular radio button is selected. For example radio button 1 is selected and the options for radio button 1 only appear. Radio button 2 is selected and the options for radio button 2 only appear. And the same with radio button 3.

Here is the code for the radio buttons and the options:

------------------------------------------------------------------------------------

<TABLE BORDER=0 WIDTH=100% CELLPADDING=3 CELLSPACING=1>
<TR>
<TD><FONT SIZE=-2 FACE="Verdana, Arial">
<INPUT TYPE="radio" NAME="GiftPrice" VALUE="Ten Dollar Gift"> <B>$10.00 Gift</B> (Pick Below)
</TD>
<TD><FONT SIZE=-2 FACE="Verdana, Arial">
<INPUT TYPE="radio" NAME="GiftPrice" VALUE="Fifteen Dollar Gift"> <B>$15.00 Gift</B> (Pick Below)
</TD>
<TD><FONT SIZE=-2 FACE="Verdana, Arial">
<INPUT TYPE="radio" NAME="GiftPrice" VALUE="Twenty Dollar Gift"> <B>$20.00 Gift</B> (Pick Below)
</TD>
</TR>

<TR>
<TD VALIGN=top STYLE="font-family: Verdana; font-style: normal; font-weight: normal; font-size: 7pt; font-variant: normal">
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Valet Series"> Key Chains - Valet Series<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Cable Collection"> Key Chains - Cable Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Classic Collection"> Key Chains - Classic Collection <BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Elegance Collection"> Key Chains - Elegance Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Key Lights"> Key Chains - Key Lights<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Padlock Collection"> Key Chains - Padlock Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Trillium Collection"> Key Chains - Trillium Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Vogue Collection"> Key Chains - Vogue Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="CD Sun Visor"> CD Sun Visor<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Sunglass Visor Clip"> Sunglass Visor Clip<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Mag-Lite AAA Solitaire"> Mag-Lite AAA Solitaire
</TD>

<TD VALIGN=top STYLE="font-family: Verdana; font-style: normal; font-weight: normal; font-size: 7pt; font-variant: normal">
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Rand McNally Atlas"> Rand McNally Atlas<BR>
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Stainless Steel Travel Mug"> Stainless Steel Travel Mug<BR>
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Mag-Lite AAA Solitaire"> Mag-Lite AAA Solitaire<BR>
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Windsor Reflections CD Case"> Windsor Reflections CD Case
</TD>

<TD VALIGN=top STYLE="font-family: Verdana; font-style: normal; font-weight: normal; font-size: 7pt; font-variant: normal">
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="MicroTek Visor CD Case"> MicroTek Visor CD Case<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Copper Travel Mug"> Copper Travel Mug<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Challenger Pen Set"> Challenger Pen Set<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Auto Vacuum Cleaner"> Auto Vacuum Cleaner<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Summit CD file holder"> Summit CD file holder
</TD>
</TR>
</TABLE>

------------------------------------------------------------------------------------

Is this possible?

Any help would be appreciated. Thanks is advance.

crvt75

This should get you started:
<script type="text/javascript">
<!--//
function doit(showIt){
document.getElementById('subDiv1').style.display = (showIt) ? 'block' : 'none';
}
//-->
</script>
<table cellpadding="0" cellspacing="15">
<tr>
<td width="300"><label>
<input type="radio" name="MyRadioGroup1" value=1 onClick="doit(1)">
Create New Radio Group</label></td>

<td width="300"><label>
<input type="radio" name="MyRadioGroup1" value=1 onClick="doit(0)">
A Plain Radio Button</label></td>
</tr>
<tr>
<td>
<div id="subDiv1" style="display:none">
<table>
<tr>
<td width="200"><label>
<input type="radio" name="MyRadioGroup2" value="1">
Sub-Group 1</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup2" value="2">
Sub-Group 2</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup2" value="3">
Sub-Group 3</label></td></tr>
</tr></table>
</td></tr></table>

.....Willy

Willy,

Thanks for the response.

I still have a question...how would I code the sub-category for the Radio Button "A Plain Radio Button" in your example?

New to JavaScript, so please bear with me.

crvt75

If you would have posted the script you were working with someone could have helped point out where you may have been going wrong instead of writing the code for you. ;)

<script type="text/javascript">
<!--//
function doit(which){
var num = 3; //NUMBER OF SUB-MENU'S TO SHOW/HIDE //;
for(var count=1;count<=num;count++){
var div = document.getElementById('subDiv'+count);
if(count==which) div.style.display = 'block';
else div.style.display = 'none';
}
}
//-->
</script>
</HEAD>

<BODY>
<div><label><input type="radio" name="MyRadioGroup1" value=1 onClick="doit(1)">
Create New Radio Group One</label>
<span id="subDiv1" style="display:none">
<label><input type="radio" name="MyRadioGroup2" value="1_1">
Sub-Group 1_1</label><label>
<input type="radio" name="MyRadioGroup2" value="1_2">
Sub-Group 1_2</label>
<label>
<input type="radio" name="MyRadioGroup2" value="1_3">
Sub-Group 1_3</label></span></div>

<div><label><input type="radio" name="MyRadioGroup1" value=1 onClick="doit(2)">
Create New Radio Group Two</label>
<span id="subDiv2" style="display:none">
<label><input type="radio" name="MyRadioGroup2" value="2_1">
Sub-Group 2_1</label><label>
<input type="radio" name="MyRadioGroup2" value="2_2">
Sub-Group 2_2</label>
<label><input type="radio" name="MyRadioGroup2" value="2_3">
Sub-Group 2_3</label></span></div>


<div><label><input type="radio" name="MyRadioGroup1" value=1 onClick="doit(3)">
Create New Radio Group Three</label>
<span id="subDiv3" style="display:none">
<label> <input type="radio" name="MyRadioGroup3" value="3_1">
Sub-Group 3_1</label>
<label> <input type="radio" name="MyRadioGroup3" value="3_2">
Sub-Group 3_2</label>
<label><input type="radio" name="MyRadioGroup3" value="3_3">
Sub-Group 3_3</label></span>
</div>

.....Willy

Willy,

I did not post the script, because I did not know how to write it.

Thanks for the code...that is exactly what I was looking for.

crvt75

I was merely pointing out that it is easier to learn from our mistakes than trying too, but not completely understanding a piece of code which someone else wrote. ;)

Your Welcome. :thumbsup:
Gald I could help;
.....Willy