Hiding DIVs based on checkbox selection

JavaScript
1

I’m wanting to hide certain divs within a container. If the sub div DOESN’T have a checkbox which is selected in it, then it should be hidden when you click the link.
eg:
if #2 and #5 checbox only where selected then divs(sub_1,sub_3,sub_4) would be hidden when link was clicked.

<a href="">click me to hide unselected sub divs</a>
<div id="container">
<div id="sub_1">
<input type="checkbox" id="select_1">
</div>
<div id="sub_2">
<input type="checkbox" id="select_2">
</div>
<div id="sub_3">
<input type="checkbox" id="select_3">
</div>
<div id="sub_4">
<input type="checkbox" id="select_4">
</div>
<div id="sub_5">
<input type="checkbox" id="select_5">
</div>
</div>

Want to do this in jquery if that is easier. Any help would be appreciated.
Many thanks

2

Good job.

You may want to tidy up and remove this duplicate set of pseudo-selectors
:checkbox:not

3

Ok, this works:

$('#container:checkbox:not(:checked)').parent().parent().parent().parent().parent().hide();

But if I could reference the parent via its ID or class it would be neater, as in the future this way if another parent element is introduced the javascript will not function as it should.

4

Tried this, but doesn’t work:

$('#container :checkbox:not(:checked)').parent('.subdiv').hide();
5

You can make use of the :not selector.

A quick test shows that this works well:


$('#container :checkbox:not(:checked)').hide();
6

or all, the parent container DIVs also have the class of “subdiv”

7

Thanks Paul, that hides the unchecked checkboxes very well :slight_smile: but I need to hide their individual containing DIVs - which are about 5 parents above, or have an ID with the same number:
select_1’s containing DIV is sub_1 etc.

8

To separate your target checkboxes from the rest, you would have to give them a class that would permit you to target them. I have modified the previously posted code
//get all the input fields
var myCheckbox = document.getElementsByTagName(‘input’);
//process each input field
var z = 0; var zMax = myCheckbox.length;
while(z < zMax) {
if(myCheckbox[z].getAttribute(‘type’) == ‘checkbox’ && myCheckbox[z].className == ‘myClass’ && myCheckbox[z].checked == true) {
myCheckbox[z].parentNode.style.display = ‘none’;
}
z++;
}

if jQuery is what you really want to use, you would still have to give your target checkboxes a class that would permit you to target them:
$(‘.myClass:checked’).parent().css(‘display’, ‘none’);

This should work…

9

The checkboxes have an ID, like select_1, select_2 etc.
Yeah would like to do the whole thing with jquery if possible,.
And it is the checkbox that ISN’T checked that the containing DIV (which isn’t actually a direct parent, more like a grand grand grand parent) needs to become hidden. (the containing div has the same number in ID, eg sub_1, sub 2)

10

You could do something like this:
//get all the input fields
var myCheckbox = document.getElementsByTagName(‘input’);
//process each input field
var z = 0; var zMax = myCheckbox.length;
while(z < zMax) {
if(myCheckbox[z].getAttribute(‘type’) == ‘checkbox’ && myCheckbox[z].checked == true) {
myCheckbox[z].parentNode.style.display = ‘none’;
}
z++;
}

11

Thanks, I can hack that to work for what I need. :slight_smile:
But is there a jquery or neater way, as my webpage may have other, unlrelated checkboxes that shouldn’t be looped thru?
again thx mate

12

Thanks for getting me on the right track. I discovered “parents” which is what I needed.

Worked it out:

$('#container:checkbox:not:checkbox:not(:checked)').parents(".subdiv").hide();