Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Post Show div if check box is checked

    Hi all,

    I have a feature on my website which is optional. What I need is to have a checkbox with the label "Would you like to use Feature A". When this is checked I need the contents of a div below to be shown.

    I have no experience with JavaScript but I'm sure its the best tool to use here.

    Any advice?

    Thanks in advance!
    Last edited by alphamale; 10-08-2012 at 03:52 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,900
    Thanks
    56
    Thanked 543 Times in 540 Posts
    Code:
    <head>
    <style>
    #feature{display:none}
    </style>
    </head>
    <body>
    Would you like to use Feature A?<input type="checkbox" onclick="showFeat(this)"/>
    <div id="feature">feature A content here</div>
    <script>
    function showFeat(box){
    document.getElementById("feature").style.display=box.checked?"block":"none";
    }
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    alphamale (10-08-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    <head>
    <style>
    #feature{display:none}
    </style>
    </head>
    <body>
    Would you like to use Feature A?<input type="checkbox" onclick="showFeat(this)"/>
    <div id="feature">feature A content here</div>
    <script>
    function showFeat(box){
    document.getElementById("feature").style.display=box.checked?"block":"none";
    }
    </script>
    </body>
    Thanks I'll give this a shot now

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Worked perfectly. Thanks!

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    ya broke me down..

    First off, nice code xelawho!
    If I throw a wrench, could you throw it back, please?
    My interest is to have multiple checkboxes and if (any) are checked, then show the div, but if none are checked, then hide the div.

    my lame modification of your code fails by hiding the div as soon as any checkbox is uncheck.

    how would you write it so it won't hide the div until (all) checkboxes are unchecked?

    my lame modification of your code:

    Code:
    <head>
    <style>
    #feature{display:none}
    </style>
    </head>
    <body>
    Would you like to use Feature A?<br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="1" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="2" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="3" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="4" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="5" /><br>
    <div id="feature"><input name="submit" type="submit" value="submit"></div>
    <script>
    function showFeat(box){
    document.getElementById("feature").style.display=box.checked?"block":"none";
    }
    </script>
    </body>
    Thanks in advance for your assistance.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,900
    Thanks
    56
    Thanked 543 Times in 540 Posts
    you set a flag that sets the display to none, loop through all the cbs, if one is checked change the flag to show the button then apply the style once the loop has finished:

    Code:
    <body>
    Would you like to use Feature A?<br>
    <input name="Ready[]" type="checkbox" onclick="showFeat()" value="1" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat()" value="2" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat()" value="3" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat()" value="4" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat()" value="5" /><br>
    <div id="feature"><input name="submit" type="submit" value="submit"></div>
    <script>
    function showFeat(){
    var disp="none";
    var cbs=document.getElementsByName("Ready[]")
    for (var i = 0; i < cbs.length; i++) {
    if(cbs[i].checked){
    disp="block";
    		}
    	}
    document.getElementById("feature").style.display=disp;
    }
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    outspoken (10-09-2012)

  • #7
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    friggin awesome

    WOW, Thanks for that!

    That was killing me...

    I did find a css way on the stack forum, and bastardized it too.
    it works, but its ugly:

    Code:
    <html>
    <head>
    <style type="text/css">
      #input_container > input + input + input + div {display:none}
      #input_container > input:checked + input:checked + input:checked + div {display:block}
      #input_container > input + input:checked + input:checked + div {display:block}
      #input_container > input:checked + input + input:checked + div {display:block}
      #input_container > input:checked + input:checked + input + div {display:block}
      #input_container > input:checked + input + input + div {display:block}
      #input_container > input + input:checked + input + div {display:block}
      #input_container > input + input + input:checked + div {display:block}
    </style>
    </head>
    <div id="input_container">
      <input type="checkbox">blah1
      <input type="checkbox">blah2
      <input type="checkbox">blah3
      <div>To show/hide</div>
    </div>
    </body>
    </html>

    I really like your way,
    THANKS!

  • #8
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    oops

    I just realized that upon initial load, the div is shown.
    what would you change to hide it on load?

    Thanks again.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,900
    Thanks
    56
    Thanked 543 Times in 540 Posts
    erm...
    Code:
    #feature{display:none}
    here's another way, closer to your original, that keeps track of the number of boxes checked. If it gets to zero the button gets hidden:

    Code:
    <body>
    Would you like to use Feature A?<br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="1" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="2" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="3" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="4" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="5" /><br>
    <div id="feature"><input name="submit" type="submit" value="submit"></div>
    <script>
    var ckd=0;
    function showFeat(box){
    ckd=box.checked?(ckd+1):(ckd-1);
    document.getElementById("feature").style.display=ckd==0?"none":"block";
    }
    </script>
    </body>

  • #10
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    nope

    That code doesn't seem to function.

    the div is shown and nothing hides it.

    EDIT>>>

    it works the same as above..
    Last edited by outspoken; 10-09-2012 at 04:45 PM. Reason: more testing

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,900
    Thanks
    56
    Thanked 543 Times in 540 Posts
    you might have to show your code (have you given the div to be hidden the id of "feature"?)

  • #12
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    copy paste

    I apologize for dragging this out.
    I just copied your code and tested it, with no edits, just to see it function.
    I am using firefox 15.0.1
    windows 7,
    testing the code on a hosted linux web server with php 5.3.2

    here is your code that I pasted: (the div does have id="feature")

    Code:
    <body>
    Would you like to use Feature A?<br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="1" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="2" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="3" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="4" /><br>
    <input name="Ready[]" type="checkbox" onclick="showFeat(this)" value="5" /><br>
    <div id="feature"><input name="submit" type="submit" value="submit"></div>
    <script type="text/javascript">
    var ckd=0;
    function showFeat(box){
    ckd=box.checked?(ckd+1):(ckd-1);
    document.getElementById("feature").style.display=ckd<=0?"none":"block";
    }
    </script>
    </body>
    it shows the div at initial load.
    past that it works awesome.
    it hides the div after unchecking all boxes.

    thanks again for staying on this!

  • #13
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    i am an idiot

    i am an idiot,

    I didn't comprehend your css statement...

    duh...

    Thanks

  • #14
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Re:Post #2
    I copied your code to hide a fieldset until checkbox checked by wrapping the fieldset in a div and it worked but I don't understand why it works.

    I understand the CSS to hide it. I understand the html for the div, the input, and the onclick.
    On the javascript side, I understand that you want the div's style to be set to display equal to when the checkbox is checked.
    What I don't understand is:
    Code:
    function showFeat(box){
    document.getElementById("feature").style.display=box.checked?"block":"none";
    1. (box) - is box just a variable name or is it some inherent code for checkbox?
    2. box.checked?"block":"none" - what are these called? nodes? attributes? I want to know what tutorial to google to learn how to understand and do this. It works like an if else statement but severely condensed. I'm amazed but it's not hard to amaze beginners.

  • #15
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    ? :

    Javascript ? question mark : colon
    I finally found some information. It IS a condensed way to make an if else statement! Here's the link to the tutorial: http://javascript.about.com/library/bltut04.htm
    Basically the question mark is the 'if' and the colon is the 'else'.
    So box.checked?"block":"none" means if the box is checked change the CSS style to block, else or otherwise change the CSS style to none.

    .checked is an actual javascript command.
    the (box) thing still seems totally random but I'll keep looking.
    Last edited by jswannabe; 11-24-2012 at 02:14 PM. Reason: I wanted to edit the title but couldn't so I added it to the post to make it more searchable for others.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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