www.webdeveloper.com
Results 1 to 9 of 9

Thread: Show / Hide div based on Radio button

Hybrid View

  1. #1
    Join Date
    Mar 2006
    Posts
    49

    Show / Hide div based on Radio button

    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" />
    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>
    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

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2008
    Posts
    4
    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.

  4. #4
    Join Date
    Mar 2006
    Posts
    49
    Vic,

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




    God bless!

    Karen

  5. #5
    Join Date
    Aug 2012
    Posts
    2
    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:

    Code:
    <script language="JavaScript" type="text/javascript">
    /*<![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';
    }
    /*]]>*/
    </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>
    Would someone be able to show me how to do this correctly?

    Thanks,
    -Don

  6. #6
    Join Date
    Aug 2012
    Posts
    2
    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.

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Oct 2012
    Posts
    3
    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.

  9. #9
    Join Date
    Oct 2012
    Posts
    3
    Quote Originally Posted by JS=Freak View Post
    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" />
    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>
    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


    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles