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.

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.

LuckyB
—
2010-06-12T02:08:59Z —
#4

Tried this, but doesn't work:

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

Paul_Wilkins
—
2010-06-12T01:32:55Z —
#5

LuckyB said:

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)

You can make use of the :not selector.

A quick test shows that this works well:

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

LuckyB
—
2010-06-12T01:52:36Z —
#6

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

LuckyB
—
2010-06-12T01:43:48Z —
#7

Thanks Paul, that hides the unchecked checkboxes very well 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.

TommiChi
—
2010-06-11T18:42:36Z —
#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 fieldsvar myCheckbox = document.getElementsByTagName('input');//process each input fieldvar 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....

LuckyB
—
2010-06-12T01:04:41Z —
#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)