Question

我有一个与Uncheck parent node if all children unchecked in JQuery类似的问题（使用此解决方案），并试图对其进行修改，以便孩子们也可以取消选中是否取消选中父级（上面/下面的操作无效）。 / p>

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().children('input:checked').length).trigger('change');
        }        
    });    
});

虽然我不确定原因，但我必须将prop从最后一行更改为attr，以便它因某种原因在本地正确地用作JSFiddle ...

基本上我有3级设置：

Grand-Parent
- Parent
-- Child

如果选中/取消选中grandparent，则应检查/取消选中其子女和孙子女。
如果选中/取消选中parent，则应检查/取消选中其子项及其父项。
如果选中children，则应检查其父级和祖父母（如果未选中子级，则不应检查父级）。

我正在尝试将其更改为大陆，国家，地区 - 我想你会理解我是否只是这样说....

由于

Answer 1

以下是解决方案：小提琴：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);
            }
        });
    }
});

修改和解释

$与jQuery完全相同。使用时保持一致：jQuery只应在您不确定是否$ === jQuery（$被覆盖？）时使用。
:checkbox是一个匹配每个input[type="checkbox"]的选择器。指定input:checbkox已经过时，因为复选框元素始终是输入元素。
.find(..)寻找匹配选择器的子元素（不是直接子元素）。 "#treeList :checkbox"速度更快，结果与$('#treeList').find(':checkbox')相同。
将属性/方法/事件添加到jQuery对象时，将修改与选择器匹配的所有元素。因此，您无需单独遍历每个元素：jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)})可以缩短为jQuery('#treeList :checkbox').change(...)。
更改复选框检查状态后，您不必触发change，因为该功能已经处理完整的树。

Answer 2

老问题，但你可以这样做：

$('input[type=checkbox]').change(function(){
    $(this).next().find('input[type=checkbox]').prop('checked', this.checked);
    $(this).parents('ul').prev('input[type=checkbox]').prop('checked', function(){
        return $(this).next().find(':checked').length;
    });
});

小提琴：http://jsfiddle.net/ojc1qg1f/

动态选中/取消选中树中的复选框

2 个答案:

修改和解释