I have multiple checkboxes in a form. Based on clicking those checkboxes, I show a div section. But if I uncheck even one checkbox, that div section gets hidden. How do I make sure that div section is hidden only if all checkboxes are unchecked. Crude way can be to write my own 'display' method which will check if all checkboxes are unchecked and then hide the div section. Any easier solution??
+1
A:
Not really, you need Javascript for this one... Or maybe... Let's say:
<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}
</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>
R. Hill
2010-07-20 17:53:50
I am using javascript only!!
yogsma
2010-07-20 17:54:20
That's even more simpler, that's just plain CSS/HTML, although admittedly I didn't test this.
R. Hill
2010-07-20 17:59:29
Just tested it, it works (in FF).
R. Hill
2010-07-20 18:01:33
how many browsers is this going to work on? + won't work on IE6 and :checked won't work on IE7
Paolo Bergantino
2010-07-20 18:02:07
True. I despise IE :-) But the solution is still a valid one if one doesn't mind older browsers (happens sometimes)
R. Hill
2010-07-20 18:05:22
Fair enough. Won't this also only show the div if all of them are checked?
Paolo Bergantino
2010-07-20 18:11:32
+3
A:
HTML:
<input type="checkbox" class="group" name="check1">
<input type="checkbox" class="group" name="check2">
<input type="checkbox" class="group" name="check3">
<input type="checkbox" class="group" name="check4">
jQuery:
$(function() {
var $checks = $('input:checkbox.group');
$checks.click(function() {
if($checks.filter(':checked').length == 0) {
$('#div').hide();
} else {
$('#div').show();
}
});
});
Paolo Bergantino
2010-07-20 17:55:39
Is jQuery the assumption now? Because it's not mentioned in the original question...
Bob
2010-07-20 18:01:19
Ha, prey to my assumptions. I could swear I saw a jQuery tag. Anyways, I don't feel like trying to cobble together an example of what it would take to get that going with plain javascript, so I'll just leave this here in case he is using/is willing to use jQuery.
Paolo Bergantino
2010-07-20 18:04:28
If you had the same name, there would be no need for adding a class to each checkbox.
Gert G
2010-07-20 18:32:31
+2
A:
The following code will show the div if one or more checkboxes has been checked:
jQuery
Version 1:
$("input[name='mycheckboxes']").change(function() {
$("#showme").toggle($("input[name='mycheckboxes']:checked").length>0);
});
Version 2 (more efficient):
var MyCheckboxes=$("input[name='mycheckboxes']");
MyCheckboxes.change(function() {
$("#showme").toggle(MyCheckboxes.is(":checked"));
});
HTML
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<div id="showme" style="display: none">Show me</div>
--- Different Checkbox Names Version ---
For different named checkboxes, wrap them in a DIV with an identifier. E.g.
jQuery
var MyCheckboxes=$("#checkboxgroup :checkbox");
MyCheckboxes.change(function() {
$("#showme").toggle(MyCheckboxes.is(":checked"));
});
HTML
<div id="checkboxgroup">
<input type="checkbox" name="mycheckbox1" />
<input type="checkbox" name="mycheckbox2" />
<input type="checkbox" name="mycheckbox3" />
<input type="checkbox" name="mycheckbox4" />
</div>
<div id="showme" style="display: none">Show me</div>
This code in action.
Gert G
2010-07-20 18:05:55
toggle is a nice touch, but if you can give classes to your checkboxes and cache your query it is much more efficient than querying by name (not to mention he may need them to be different names, otherwise they'd probably be radios)
Paolo Bergantino
2010-07-20 18:10:35
There's no reason to use classes for this. The name is the common selector here.
Gert G
2010-07-20 18:20:53
@Gert- Thanks. I tried that. Only difference in my code from your example above is that all checkboxes are in a table instead of div. That Table does have an id. So it should still work. But it isn't.
yogsma
2010-07-20 20:01:35
@Gert- It worked. I added $(document).ready(function(){}); around that part of code. Thanks
yogsma
2010-07-20 20:20:54
@yogsma - Good stuff. It's good that you figured out the `$(document).ready(function(){})`. :) It would also work if you put the jQuery code after the `FORM`/`DIV` elements, but `$(document).ready(function(){})` allows you to put all the JS/jQuery code in for instance the `HEAD`.
Gert G
2010-07-20 20:33:21
+1
A:
I'd create a function that uses a variable that tracks the number of checkboxes checked:
var numberOfChecks = 0;
function display(ev) {
var e = ev||window.event;
if (this.checked) {
numberOfChecks++;
} else {
numberOfChecks--;
}
if (!numberOfChecks) {
//hide div code
} else {
//display div code
}
}
Use that function for each onClick event for every checkbox. In the ideal world this would be done inside some initialization function so that numberOfChecks and display aren't in the global namespace.
Bob
2010-07-20 18:25:39
+1
A:
Plain Javascript:
HTML
<div id="checkboxes">
<input type="checkbox" name="check1">
<input type="checkbox" name="check2">
<input type="checkbox" name="check3">
<input type="checkbox" name="check4">
</div>
<div id="hiddendiv"><!-- more stuff --></div>
Javascript
(function() { //Create clousre to hide the checked variable
var checked = 0;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
for (var i=0, l=inputs.length; i<l; i++) {
if (inputs[i].type == 'checkbox') {
if (inputs[i].checked) checked++; //Count checkboxes that might be checked on page load
inputs[i].onchange = function() {
checked += this.checked ? 1 : -1;
var hiddendiv = document.getElementById('hiddendiv');
if (!checked) hiddendiv.style.display = "none";
else hiddendiv.style.display = "";
};
}
}
}());
The other option is to simply iterate through each checkbox every time the change event is fired rather than relying on counting, which is probably more error prone. Obviously jQuery is more concise, but a little verbosity never hurt anyone.
MooGoo
2010-07-20 18:31:38