Show / Hide div based on Radio button

@JS_FreakSep 18.2008

Hey everyone,

I need help. I have two divs I want to show or hide based on which radion button is selected. These are my buttons:

[CODE]<input name=”selection” type=”radio” value=”Silver Service” checked=”checked” /> <input name=”selection” type=”radio” value=”Gold Service” /> <input name=”selection” type=”radio” value=”Platinum Service”/> <input name=”selection” type=”radio” value=”Diamond Service” />[/CODE]

And these are my two divs:

[CODE]<div id=”courier”>Select your courier:<br /> Blah blah….Dropdown to come here</div> </p> <div id=”depot”><p>Select the closest depot for parcel drop-off: Blah blah….dropdown to come here </p></div>[/CODE]

Basically the depot div must be visible by default and Silver service selected. But when Gold or Diamond service is selected, the courier div must show and the depot div hidden.

Can anybody please help?

Thanks!

Karen

to post a comment

JavaScript

8 Comments(s) _↴

@vwphillipsSep 18.2008 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 function Test(rad){
 var rads=document.getElementsByName(rad.name);
 document.getElementById('courier').style.display=(rads[1].checked||rads[3].checked)?'none':'block';
 document.getElementById('depot').style.display=(rads[1].checked||rads[3].checked)?'block':'none';
 }
 /*]]>*/
 </script></head>
 
 <body>
 <input name="selection" type="radio" value="Silver Service" checked="checked" onclick="Test(this);"/>
 <input name="selection" type="radio" value="Gold Service"  onclick="Test(this);"/>
 <input name="selection" type="radio" value="Platinum Service" onclick="Test(this);"/>
 <input name="selection" type="radio" value="Diamond Service"  onclick="Test(this);"/>
 <div id="courier">Select your courier:<br />
 Blah blah....Dropdown to come here</div>
 </p>
 <div id="depot"><p>Select the closest depot for parcel drop-off: Blah blah....dropdown to come here
 </p></div>
 </body>
 
 </html>[/CODE]

@scottydSep 18.2008 — #try this too:

http://javascript.internet.com/forms/field-show.html

i am not too sure if that is also what you are look for as well.

@JS_FreakauthorSep 19.2008 — #Vic,

You are a rock star! It works perfectly!!!!!!!

God bless!

Karen

@NuclearGeneralAug 14.2012 — #Hello,

I saw this the other day and have been trying to edit it to suit my needs, but it won't seem to do exactly as I need it to. I am trying to have it show 2 different sections from one radio button selection with a maximum of 4 radio buttons in all. Here is how I tried editing it:

<i>
 </i>&lt;script language="JavaScript" type="text/javascript"&gt;
 /*&lt;![CDATA[*/
 function HostingSpec(rad){
 var rads=document.getElementsByName(rad.name);
 document.getElementById('hosting_spec_1').style.display=(rads[1].checked||rads[2].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_1_1').style.display=(rads[1].checked||rads[2].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_2').style.display=(rads[2].checked||rads[1].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_2_2').style.display=(rads[2].checked||rads[1].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_3').style.display=(rads[3].checked||rads[1].checked||rads[2].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_3_3').style.display=(rads[3].checked||rads[1].checked||rads[2].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_4').style.display=(rads[4].checked||rads[1].checked||rads[2].checked||rads[3].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_4_4').style.display=(rads[4].checked||rads[1].checked||rads[2].checked||rads[3].checked)?'block':'none':'none':'none';
 }
 /*]]&gt;*/
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;TABLE&gt;
 &lt;TR&gt;
 &lt;TD&gt;* Choose A Hosting Package:&lt;/TD&gt;
 &lt;TD&gt;&lt;INPUT type="radio" name="hosting_package" id="hosting_package_1" value="1" class="validate[required] radio" onclick="HostingSpec(this);" /&gt;&amp;nbsp;&lt;BR /&gt;
 &lt;INPUT type="radio" name="hosting_package" id="hosting_package_2" value="2" class="validate[required] radio" onclick="HostingSpec(this);" /&gt;&amp;nbsp;&lt;BR /&gt;
 &lt;INPUT type="radio" name="hosting_package" id="hosting_package_3" value="3" class="validate[required] radio" onclick="HostingSpec(this);" /&gt;&amp;nbsp;&lt;BR /&gt;
 &lt;INPUT type="radio" name="hosting_package" id="hosting_package_4" value="4" class="validate[required] radio" onclick="HostingSpec(this);" /&gt;&amp;nbsp;&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_1" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 1&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_1_1" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 1-1&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_2" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 2&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_2_2" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 2-2&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_3" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 3&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_3_3" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 3-3&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_4" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 4&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR id="hosting_spec_4_4" style="display:none;"&gt;
 &lt;TD&gt;&lt;/TD&gt;
 &lt;TD&gt;Blah 4-4&lt;/TD&gt;
 &lt;/TR&gt;

Would someone be able to show me how to do this correctly?

Thanks,

-Don ?

@NuclearGeneralAug 14.2012 — #EDIT: Forgot to mention; I want the 1st radio button to show the hosting_spec_1 & hosting_spec_1_1 and radio button 2 to show hosting_spec_2 and so on and so forth for all 4 radio buttons.

@vwphillipsAug 14.2012 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 function HostingSpec(rad){
 var rads=document.getElementsByName(rad.name);
 var all=['hosting_spec_1','hosting_spec_1_1','hosting_spec_2','hosting_spec_2_2','hosting_spec_3','hosting_spec_3_3','hosting_spec_4','hosting_spec_4_4']
 var ary=[
 ['hosting_spec_1','hosting_spec_1_1'],
 ['hosting_spec_2','hosting_spec_2_2'],
 ['hosting_spec_3','hosting_spec_3_3'],
 ['hosting_spec_4','hosting_spec_4_4']
 ]
 for (var z0=0;z0<all.length;z0++){
 document.getElementById(all[z0]).style.display='none';
 }
 for (var z1a,z1=0;z1<rads.length;z1++){
 if (rads[z1].checked&&ary[z1]){
 for (z1a=0;z1a<ary[z1].length;z1a++){
 document.getElementById(ary[z1][z1a]).style.display='block';
 }
 return;
 }
 }
 
 }
 /*]]>*/
 </script>
 </head>
 
 <body>
 <TABLE>
 <TR>
 <TD>* Choose A Hosting Package:</TD>
 <TD><INPUT type="radio" name="hosting_package" id="hosting_package_1" value="1" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
 <INPUT type="radio" name="hosting_package" id="hosting_package_2" value="2" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
 <INPUT type="radio" name="hosting_package" id="hosting_package_3" value="3" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
 <INPUT type="radio" name="hosting_package" id="hosting_package_4" value="4" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;</TD>
 </TR>
 <TR id="hosting_spec_1" style="display:none;">
 <TD></TD>
 <TD>Blah 1</TD>
 </TR>
 <TR id="hosting_spec_1_1" style="display:none;">
 <TD></TD>
 <TD>Blah 1-1</TD>
 </TR>
 <TR id="hosting_spec_2" style="display:none;">
 <TD></TD>
 <TD>Blah 2</TD>
 </TR>
 <TR id="hosting_spec_2_2" style="display:none;">
 <TD></TD>
 <TD>Blah 2-2</TD>
 </TR>
 <TR id="hosting_spec_3" style="display:none;">
 <TD></TD>
 <TD>Blah 3</TD>
 </TR>
 <TR id="hosting_spec_3_3" style="display:none;">
 <TD></TD>
 <TD>Blah 3-3</TD>
 </TR>
 <TR id="hosting_spec_4" style="display:none;">
 <TD></TD>
 <TD>Blah 4</TD>
 </TR>
 <TR id="hosting_spec_4_4" style="display:none;">
 <TD></TD>
 <TD>Blah 4-4</TD>
 </TR>
 </body>
 
 </html>[/CODE]

@Play01Oct 09.2012 — #Hello everybody, I have the same problem as previous posts:

I have a radio input and I would like that depending on what you choose, it displays another checkbox selection.

<input type="radio" name="food" value="Breakfast" />

Breakfast

<input type="radio" name="food" value="Lunch" />

Lunch

<input type="radio" name="food" value="Dinner" />

Dinner

I coded this:

<script>

$("input[name='food']").change(function(){

if ($("input[name='food']:checked").val() == 'Breakfast')

{ $("p").show();}

else if ($("input[name='food']:checked").val() == 'Lunch')

{ }

else

{ }

});

</script>

how could I do if I want to insert checkbox selecion into the if/else statements so that if i choose luch it shows me another checkbox selection with other fields??

Thank you so much.

@Play01Oct 10.2012 — #Hey everyone,

I need help. I have two divs I want to show or hide based on which radion button is selected. These are my buttons:

[CODE]<input name="selection" type="radio" value="Silver Service" checked="checked" />
 <input name="selection" type="radio" value="Gold Service" />
 <input name="selection" type="radio" value="Platinum Service"/>
 <input name="selection" type="radio" value="Diamond Service" />[/CODE]

And these are my two divs:

[CODE]<div id="courier">Select your courier:<br />
 Blah blah....Dropdown to come here</div>
 </p>
 <div id="depot"><p>Select the closest depot for parcel drop-off: Blah blah....dropdown to come here
 </p></div>[/CODE]

Basically the depot div must be visible by default and Silver service selected. But when Gold or Diamond service is selected, the courier div must show and the depot div hidden.

Can anybody please help?

Thanks!

Karen[/QUOTE]

What's the code with 3 imput radio and 3 different div similar to this example but with every hidden div for default??

Thank you

Also in #JavaScript _↴

Problems with "getElementById" on Opera and Mozilla Autofill - Can anybody do this?How can I to create a table and create 2 columns for each row on the fly.

Success!

Help @JS_Freak spread the word by sharing this article on Twitter...

Tweet This

Show / Hide div based on Radio button

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Show / Hide div based on Radio button

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴