如果在JQuery中取消选中所有子项，请取消选中父节点

如果未选中所有子项，我想取消选中父节点。

 
  Application Manager 
 
  Application Manager Panel 
 
  Client Role 
 
  Client Task 1 
 
  Client Task 2 
 
 
 
  

我有以下jQuery脚本。 但是当我取消选中任何一个孩子时，父母都取消了。 它应该看，如果所有的孩子都没有被检查。 那么它应该取消选中父母。

 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); } }); }); 

Answer 1

每次取消选中子项时，您都取消选中父li复选框，而不是检查是否还有其他一些已检查项。 相反，您可以检查已检查的项目数，并将该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'); } }); }); 

示例： http ： //jsfiddle.net/niklasvh/fRxVs/

这是你的小提琴的更新版本…添加一些CSS来澄清树级（父母和孩子的关系） http://jsfiddle.net/vimalpatel/fRxVs/440/

Answer 2

在这里你有：

 $("#treeList :checkbox").change(function(){ uncheckParentIfSiblingsUnchecked($(this)); }); function uncheckParentIfSiblingsUnchecked($chk){ if($chk.size() == 1 && !$chk.is(":checked")){ $checked_siblings = $chk.closest("ul").children("li").children(":checkbox:checked"); if($checked_siblings.size() == 0){ $parent_checkbox = $chk.closest("ul").prev(":checkbox").attr("checked", false); uncheckParentIfSiblingsUnchecked($parent_checkbox); } } } 

它是递归的，因为它必须“冒泡”到根复选框。 希望这可以帮助。 干杯