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

我有一个与（使用此解决方案）类似的问题，并尝试对其进行修改，以便在取消选中父项时（上面/下面的操作失败），子项也将全部取消选中

用于上述（）的JSFIDLE

虽然我不知道为什么，但出于某种原因，我不得不将

prop

从最后一行更改为

attr

，以便它在本地正确地作为JSFIDLE工作

基本上，我有一个3级设置：

Grand-Parent
- Parent
-- Child

• 如果选中/取消选中了

  祖父母

  ，则其子代和孙辈也应选中/取消选中
• 如果选中/取消选中父项，则应选中/取消选中其子项及其父项
• 如果检查了

  子项

  ，则应检查其父项和祖父母（如果未检查任何子项，则不应检查父项）

我正试图把这一点转变为大陆、国家、地区——我想如果我这么说的话，你们会理解的

---

谢谢

以下是解决方案：小提琴：

修改和解释

• $

  与

  jQuery

  完全相同。使用时要保持一致：

  jQuery

  仅当您不确定

  $==jQuery

  （是否被

  $

  覆盖？）时才应使用

• ：checkbox

  是一个选择器，它匹配每个

  输入[type=“checkbox”]

  。指定

  input:checbkox

  已经过时，因为checkbox元素始终是输入元素

• .find（..）

  查找匹配选择器的子元素（不一定是直接子元素）<代码>“#树列表：复选框”速度更快，结果与

  $（“#树列表”）相同。查找（“：复选框”）

• 将属性/方法/事件添加到jQuery对象时，将修改与选择器匹配的所有元素。因此，您不必单独遍历每个元素：

  jQuery.each（jQuery（'#treeList:checkbox'）、function（）{jQuery（this.change（…）}）

  可以缩短为

  jQuery（'#treeList:checkbox'）。change（…）

• 您不必在更改复选框检查状态后触发

  change

  ，因为该函数已经处理了整个树

---

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

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

---

Fiddle:
在代码审查中查看这个问题刚才查看了一下，并尝试了JSFIDLE-但这只会让孩子的父母检查是否两个（我想最终都是）孩子都检查过-我希望这样，只有一个孩子可以进入树。我正在查看它。我刚刚对代码进行了优化，并着手修复它；）谢谢@RobW！期待看到您的解决方案，希望我能通过它增加对jQuery的理解：）很好！虽然我刚刚注意到，如果你勾选2个“父母”，然后取消勾选其中一个，“祖父母”取消勾选，那么这是否可以修改，以便祖父母只在没有勾选父母的情况下取消勾选？当我取消勾选每个孩子时，而不是取消勾选父母时，请这样做。顺便说一句，解释非常好！

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

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