Resolved Show div if check box is checked

alphamale · 10-08-2012, 03: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, 03:33 PM

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>

alphamale · 10-08-2012, 03:34 PM

Quote:

Originally Posted by xelawho

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

alphamale · 10-08-2012, 03:51 PM

Worked perfectly. Thanks!

outspoken · 10-09-2012, 03: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:

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, 04: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:

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>

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

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!

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

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>

outspoken · 10-09-2012, 04: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, 04: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, 05: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")

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!

outspoken · 10-09-2012, 05:07 PM

i am an idiot,

I didn't comprehend your css statement...

duh...

Thanks

jswannabe · 11-23-2012, 08: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:

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.

jswannabe · 11-24-2012, 02: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.