I have this tree list, I am checking all childrens checkboxes if parent is checked and so on, everything works great, but I am having an issue with the last ul Item 03 checkboxes, need to check if all checkboxes are checked then parent checkbox should be checked and the viceversa if the all checkboxes are unchecked then uncheck parent check, something like the toggle the parent checkbox based on all check/all unchecked.
I have a jsfiddle http://ift.tt/1xzlNgu
and this is how the js looks like:
function checks() {
$('input[type="checkbox"]').on('change', function(){
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
var count_checked = checkboxes.filter(":checked").length;
if (count_checked == 0) {
console.log('All checked'); //find parent and uncheck box
} else if(count_checked != checkboxes.length) {
console.log('');
} else {
console.log('all childrens unselected'); //find parent and uncheck box
}
if ($(this)[0].checked == true) {
checkboxes.each(function(){
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
});
};
});
} checks();
This is how the html markup looks like:
<ul>
<li>
item 01<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
<li>
item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
<li>
item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Aucun commentaire:
Enregistrer un commentaire