...

View Full Version : Resolved Show div if check box is checked



alphamale
10-08-2012, 04:26 PM
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!

xelawho
10-08-2012, 04:33 PM
<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>

alphamale
10-08-2012, 04:34 PM
<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 :)

alphamale
10-08-2012, 04:51 PM
Worked perfectly. Thanks!

outspoken
10-09-2012, 04:15 PM
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:



<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.

xelawho
10-09-2012, 05:07 PM
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:


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

outspoken
10-09-2012, 05:18 PM
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:



<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!

outspoken
10-09-2012, 05:24 PM
I just realized that upon initial load, the div is shown.
what would you change to hide it on load?

Thanks again.

xelawho
10-09-2012, 05:35 PM
erm...

#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:



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

outspoken
10-09-2012, 05:43 PM
That code doesn't seem to function.

the div is shown and nothing hides it.

EDIT>>>

it works the same as above..

xelawho
10-09-2012, 05:48 PM
you might have to show your code (have you given the div to be hidden the id of "feature"?)

outspoken
10-09-2012, 06:01 PM
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")


<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!

outspoken
10-09-2012, 06:07 PM
i am an idiot,

I didn't comprehend your css statement...

duh...

Thanks

jswannabe
11-23-2012, 09:13 PM
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:

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.

jswannabe
11-24-2012, 03:13 PM
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.

Philip M
11-24-2012, 05:01 PM
Google for "Javascript ternary operator".

The ?: operator can be used as a shortcut for an if...else statement.

box is just the assigned name of the passed variable. It could be anything.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum