Uncheck parent node if all children unchecked in JQuery -
i want uncheck parent node if children unchecked.
<ul id="treelist"> <li> <input type="checkbox" name="selectedrole"> application manager <ul> <li> <input type="checkbox" name="selectedrole"> application manager panel </li> <li> <input type="checkbox" name="selectedrole"> client role <ul> <li> <input type="checkbox" name="selectedrole"> client task 1 </li> <li> <input type="checkbox" name="selectedrole"> client task 2 </li> </ul> </li> </ul> </li>
i have following jquery script. when uncheck children, parent got uncheck. should see, if children unchecked. should uncheck parent.
jquery.each(jquery('#treelist ul li').find(':checkbox'), function(){ jquery(this).change(function (){ if (jquery(this).is(':checked')) { jquery(this).parents('ul').siblings('input:checkbox').attr('checked', true); }else{ jquery(this).parents('ul').siblings('input:checkbox').attr('checked', false); } }); });
you unchecking parent li
checkbox every time uncheck child, instead of checking if there's still other checked items. instead, check number of items checked
, use length
boolean
:
jquery.each(jquery('#treelist ul li').find(':checkbox'), function(){ jquery(this).change(function (){ if (jquery(this).is(':checked')) { jquery(this).parentsuntil('#treelist').siblings().filter('input:checkbox').attr('checked', true).trigger('change'); }else{ jquery(this).parents('ul:first').siblings('input:checkbox').prop('checked', $(this).parent().siblings().children('input:checked').length).trigger('change'); } }); });
example: http://jsfiddle.net/niklasvh/frxvs/
Comments
Post a Comment