www.webdeveloper.com
Results 1 to 8 of 8

Thread: Show/Hide checkbox

  1. #1
    Join Date
    Dec 2005
    Posts
    21

    Show/Hide checkbox

    The code below works great, and thanks to a previous post, however I would like this code to do the opposite. For Example---to show the form elements once checkbox is clicked.

    HTML Code:
    <html>
    <head><title></title>
    <script>
    function showMe (it, box) {
      var vis = (box.checked) ? "block" : "none";
      document.getElementById(it).style.display = vis;
    }
    </script>
    </head>
    <body>
    <div id="div1">
    <h3 align="center"> This JavaScript shows how to hide divisions </h3>
    <table border=1 id="t1">
    <tr>
    <td>i am here!</td>
    </tr>
    </table>
    </div>
    <form>
    <input type="checkbox" name="c1" onclick="showMe('div1', this)" checked>Show Hide Checkbox
    </form>
    </body>
    Thanks everyone
    Last edited by Happyworker; 03-31-2006 at 10:08 AM. Reason: For Clarity

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Simple. Reverse the order.
    Code:
    var vis = (box.checked) ? "none" : "block";
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  3. #3
    Join Date
    Feb 2006
    Location
    Atlanta
    Posts
    218
    David (AltF4)

  4. #4
    Join Date
    Dec 2005
    Posts
    21
    Thanks for the help, much appreciated.
    I modified the code a little. This is actually how I want it to run.

    HTML Code:
    <html>
    <head><title></title>
    <script>
    function showMe (it, box) {
      var vis = (box.checked) ? "block" : "none";
      document.getElementById(it).style.display = vis;
    }
    </script>
    </head>
    <body>
    <input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
    <div id="div1" style="display:none">
    <h3 align="center"> This JavaScript shows how to hide divisions </h3>
    <table border=1 id="t1">
    <tr>
    <td>i am here!</td>
    </tr>
    </table>
    </div>
    <form>
    
    </form>
    </body>
    </html>
    Let me know if you all think there is a better way to do it.
    Thanks again.

  5. #5
    Join Date
    Dec 2005
    Posts
    21

    Yet another request

    How can I get this script to work with radio buttons?
    Clicking the Double Sided radio button opens up the 2nd colour select box....but when I click back to the Single Sided radio button, the 2nd colour select box doesn't disappear.

    This is probably a simple fix, but I can't seem to figure it out.
    Please help


    HTML Code:
    <html>
    <head>
    <title></title>
    <script>
    function showMe (it, box) {
      var vis = (box.checked) ? "block" : "none";
      document.getElementById(it).style.display = vis;
    }
    </script>
    <body>
    <form>
    Single Sided
    <input name="Sides" type="radio" value="Single Sided" onClick="showMe('div1', this)" checked><br>
    Double Sided
    <input name="Sides" type="radio" value="Double Sided" onClick="showMe('div2', this)">
    
    
    <div id="div1">
    										
    Side One 
    <select name="Side One" class="text_form" onBlur="setinputs()" onFocus="setinputs()">
    <option>No colour</option>
    <option>2 colours</option>
    <option>3 colours</option>
    <option>4 colours</option>
    <option>5 colours</option>
    <option>6 colours</option>
    <option>more</option>
    </select>
    Coverage
    <input name="Side One Coverage" type="text" class="text_form" size="3" maxlength="3" onBlur="setinputs()" onFocus="setinputs()">% &nbsp;&nbsp;
    
    Bleed
    <input name="SideTwoBleed" type="checkbox" value="yes" onBlur="setinputs()" onFocus="setinputs()">
    </div>
    
    <div id="div2" style="display:none">
    										
    Side One 
    <select name="Side One" class="text_form" onBlur="setinputs()" onFocus="setinputs()">
    <option>No colour</option>
    <option>2 colours</option>
    <option>3 colours</option>
    <option>4 colours</option>
    <option>5 colours</option>
    <option>6 colours</option>
    <option>more</option>
    </select>
    Coverage
    <input name="Side One Coverage" type="text" class="text_form" size="3" maxlength="3" onBlur="setinputs()" onFocus="setinputs()">% &nbsp;&nbsp;
    
    Bleed
    <input name="SideTwoBleed" type="checkbox" value="yes" onBlur="setinputs()" onFocus="setinputs()">
    </div>
    </form>
    </body>
    </html>

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    I suggest you make an array of all of the IDs. In the function loop through all of them (with a for() or while() loop) and set all of those elements to display:none. Then set display:block on the element that you want to show.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  7. #7
    Join Date
    Apr 2008
    Posts
    2
    Quote Originally Posted by Happyworker
    Thanks for the help, much appreciated.
    I modified the code a little. This is actually how I want it to run.

    HTML Code:
    <html>
    <head><title></title>
    <script>
    function showMe (it, box) {
      var vis = (box.checked) ? "block" : "none";
      document.getElementById(it).style.display = vis;
    }
    </script>
    </head>
    <body>
    <input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
    <div id="div1" style="display:none">
    <h3 align="center"> This JavaScript shows how to hide divisions </h3>
    <table border=1 id="t1">
    <tr>
    <td>i am here!</td>
    </tr>
    </table>
    </div>
    <form>
    
    </form>
    </body>
    </html>
    Let me know if you all think there is a better way to do it.
    Thanks again.
    Thank you for the nice script. Although, how could I default the <div> to be hidden on page load?

  8. #8
    Join Date
    Apr 2008
    Posts
    2
    Oops, I got it. I think it didn't load properly on my browser.

    style="display:none">

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