动态检查/取消选中树中的复选框 [英] Dynamically check / uncheck checkboxes in a tree

问题描述

我有一个类似的问题要取消选中父节点，如果所有的孩子在JQuery中没有选中（使用这个解决方案），并试图修改它，以便子项也将取消选中父项是否未选中（上面/下面未能做到）。

JSFiddle用于上述（ http://jsfiddle.net/fRxVs/ ）

  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 .length）.trigger（'change'）; 
} 
}）; 
}）; 
  

虽然我不知道为什么，但我不得不更改 / code>从最后一行到 attr ，以便它正确地工作作为JSFiddle在本地由于某些原因...

基本上我有3级设置：

 大父母
  - 父
  - 子
  

• 如果 grandparent 被选中/取消选中，那么它的子孙都应该被选中/取消选中。


• 如果 parent


• 如果选中了 children ，则会检查/取消选中它的子对象及其父对象。应检查其父项和祖父项（如果没有选中子项，则不应选中父项）。

感谢

div class =h2_lin>解决方案

以下是解决方案： Fiddle： http ：//jsfiddle.net/fRxVs/55/

  $（'＃treeList：checkbox '）.change（function（）{
 $（this）.siblings（'ul'）。find（'：checkbox'）。prop（'checked'，this.checked） 
 if（this.checked）{
 $（this）.parentsUntil（'＃treeList'，'ul'）。siblings（'：checkbox'）。 
} else {
 $（this）.parentsUntil（'＃treeList'，'ul'）。each（function（）{
 var $ this = $（this）; 
 var childSelected = $ this.find（'：checkbox：checked'）。length; 
 if（！childSelected）{
 $ this.prev（'：checkbox'）。 false）; 
} 
}）; 
} 
}）; 
  





修改和说明

• $ 与 jQuery 完全相同。使用时应保持一致： jQuery 应该仅在您不确定 $ === jQuery 是 $ 覆盖吗？）。


• ：checkbox 每个输入[type =checkbox] 。指定输入：checbkox 已过时，因为checkbox元素始终是输入元素。


• .find （..）寻找作为匹配的选择器的子元素（不一定是直接子元素）的任何元素。 ＃treeList：checkbox更快，并且具有与 $（'＃treeList'）等效的结果find（'：checkbox'）。


• 将属性/方法/事件添加到jQuery对象时，将修改与该选择器匹配的所有元素。因此，你不必逐个循环遍历每个元素： jQuery.each（jQuery（'＃treeList：checkbox'），function（）{jQuery（this）.change（...）} ）可以缩短为 jQuery（'＃treeList：checkbox'）。change（...）。


• 在更改复选框检查状态后，您不必触发更改，因为该功能已处理完整树状图。

I have a similar question to Uncheck parent node if all children unchecked in JQuery (with this solution) and have tried to modify it so that the children will also all uncheck if the parent is unchecked (which the above/below fails to do).

JSFiddle for the above (http://jsfiddle.net/fRxVs/)

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

Though I'm not sure why, but I had to change prop from the last line to attr in order for it to correctly work as JSFiddle locally for some reason...

Basically I have a 3 level setup:

Grand-Parent
- Parent
-- Child

• If the grandparent is checked/unchecked, then its children and grandchildren should all be checked/unchecked too.
• If the parent is checked/unchecked, its children should be checked/unchecked as well as its parent.
• If the children are checked, then its parent and grandparent should be checked (if no children are checked then parent shouldn't be checked).

I'm trying to change this to Continent, Country, Region - I think you will understand if I were to just say this....

Thanks

解决方案

Here's the solution: Fiddle: http://jsfiddle.net/fRxVs/55/

$('#treeList :checkbox').change(function (){
    $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
    if (this.checked) {
        $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);
    } else {
        $(this).parentsUntil('#treeList', 'ul').each(function(){
            var $this = $(this);
            var childSelected = $this.find(':checkbox:checked').length;
            if (!childSelected) {
                $this.prev(':checkbox').prop('checked', false);
            }
        });
    }
});

Modifications and explanations

• $ is exactely the same as jQuery. Be consistent when using it: jQuery should only be used when you're not sure whether $ === jQuery (is $ overwritten?).
• :checkbox is a selector which matches every input[type="checkbox"]. It's obsolete to specify input:checbkox, since a checkbox element is always an input element.
• .find(..) seeks for any element which is a child (not necessery the direct child) of the matched selector. "#treeList :checkbox" is faster, and has the equivalent result as $('#treeList').find(':checkbox').
• When a property/method/event is added to a jQuery object, all elements which match the selector will be modified. Therefore, you don't have to loop through each element individually: jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)}) can be shortened to jQuery('#treeList :checkbox').change(...).
• You don't have to trigger change after changing a checkbox check state, because the function already takes care of the full tree.

这篇关于动态检查/取消选中树中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！