Results 1 to 2 of 2

Thread: Show/Hide works on a check box.. Trying for a radio button also...

  1. #1
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Show/Hide works on a check box.. Trying for a radio button also...

    This code below works great when checking a checkbox for whatever you have in a <div> tag to appear and then disappear when unchecking again. My question is does anyone understand how to get it to do this on a radio button? It does not disappear when unchecking the radio button…..
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript"> 
    
    function showMe (it, box) { 
    var vis = (box.checked) ? "block" : "none"; 
    document.getElementById(it).style.display = vis; 
    } 
    function showMe2 (it) { 
    var vis = document.getElementById(it).style.display 
    if (vis == "block") { document.getElementById(it).style.display = "none"; } 
    else { document.getElementById(it).style.display = "block"; } 
    } 
    
    </script>
    <style type="text/css">
    
    .divstyle
    {
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    }
    
    </style>
    </head>
    
    <body>
    <p>
    <input type="checkbox" onclick="showMe('div1', this)" /> 
    show div 1
    <input type="checkbox" onclick="showMe('div2', this)" />
    show div 2
    <input type="checkbox" onclick="showMe('div3', this)" />
    show div 3
    <input type="checkbox" onclick="showMe('div4', this)" />
    show div 4</p>
    <div class="divstyle" id="div1">Content div1</div>
    <div class="divstyle" id="div2">Content div2</div>
    <div class="divstyle" id="div3">Content div3</div>
    <div class="divstyle" id="div4">Content div4</div>
    
    </body>
    </html>
    The above code is awesome. I am using it and tried on radio buttons, but when you uncheck the radio button the hidden stays there, thus does not hide. Does anyone know how to get it to work properly on a radio on check and uncheck? Thanks this is actually very complicated.
    Last edited by djr33; 02-24-2012 at 12:09 AM. Reason: fix [/code] tag

  2. #2
    Join Date
    Mar 2011
    Posts
    2,051
    Thanks
    59
    Thanked 108 Times in 106 Posts
    Blog Entries
    4

    Default

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript"> 
    function showMe (it, hide1, hide2, hide3, box) { 
    document.getElementById(it).style.display = "block"; 
    document.getElementById(hide1).style.display = "none"; 
    document.getElementById(hide2).style.display = "none"; 
    document.getElementById(hide3).style.display = "none"; 
    } 
    function showMe2 (it) { 
    var vis = document.getElementById(it).style.display 
    if (vis == "block") { document.getElementById(it).style.display = "none"; } 
    else { document.getElementById(it).style.display = "block"; } 
    } 
    </script>
    <style type="text/css">
    .divstyle
    {
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    }
    </style>
    </head>
    <body>
    <p>
    <input type="radio" name="radio1" onclick="showMe('div1', 'div2', 'div3', 'div4', this)" /> 
    show div 1
    <input type="radio" name="radio1" onclick="showMe('div2', 'div3', 'div4', 'div1', this)" />
    show div 2
    <input type="radio" name="radio1" onclick="showMe('div3', 'div4', 'div1', 'div2', this)" />
    show div 3
    <input type="radio" name="radio1" onclick="showMe('div4', 'div1', 'div2', 'div3', this)" />
    show div 4</p>
    <div class="divstyle" id="div1">Content div1</div>
    <div class="divstyle" id="div2">Content div2</div>
    <div class="divstyle" id="div3">Content div3</div>
    <div class="divstyle" id="div4">Content div4</div>
    </body>
    </html>
    Tested in IE9

    Keyboard1333

    Edit: NOTE:

    function showMe2 (it) {
    var vis = document.getElementById(it).style.display
    if (vis == "block") { document.getElementById(it).style.display = "none"; }
    else { document.getElementById(it).style.display = "block"; }
    }


    Isn't doing anything, so you can delete it.
    Last edited by keyboard; 02-24-2012 at 04:01 AM. Reason: add edit

Bookmarks

Posting Permissions

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