Using jquery to change checkbox status

Question

Hi everyone!

I have a list of items that have checkboxes associated with them, and the items are beneath a list header, which also has a checkbox(for db purposes only) which is actually hidden from view. I need to make it so that if any of the checkboxes beneath the header is checked, then the header checkbox is checked as well. BUT I also need to make it so that if all of the checkboxes are unchecked, then the header one is unchecked...how hard is this going to be?

This is how I have it setup now:

if($('.childCheckBox').is(":checked")){
$('#parentBox').attr('checked', true);
}

Now I am thinking that if I were to do something where I add an else if clause:

else if($('.proBox2').is(not)(":checked"){
alert("uncheck parent");
}

But I don't know the correct syntax for is-not, or isn't, or even if there is anything that will do that. Are there any thoughts out there? I need the box to check if one is selected and uncheck if none are selected. Thanks!!

Answer 1

$('.proBox2').is(':not(:checked)')

Also, I'm not so sure about the first one. It may work, but I'd probably do it like this if it doesn't:

$('.childCheckBox:checked').length > 0

Answer 2

You have to use the not() selector:

else if($('.proBox2').is(":not(:checked)")

Read here about the not selector.