Javascript 父到子复选框选择

我正在尝试使用复选框设置和父子选择，如果选择了子元素，则父元素具有不确定（减号）

HTML结构

红人


谢夫斯


维京人


喷射机




包装工


充电器


巨人


喷射机

Javascript（jQuery）

这是我目前设置的代码

让我知道我做错了什么

---

谢谢

您的解决方案看起来太复杂了，这是一个简单的版本

您需要首先确定是否更改了父或子复选框，然后分别将结果传递给相关方

$（'input[type=checkbox]'）。更改（函数（e）{
var checked=$（this.prop（'checked'）；
var isParent=！！$（this）.closest（'li'）.find（'>ul'）.length；
如果（isParent）{
//如果更改了父级复选框，请找到所有子级
var children=$（this.closest（'li'）.find（'ul input[type=checkbox]）；
儿童道具({
选中的
})；//所有的孩子都将拥有父母所拥有的
}否则{
//如果更改了子复选框，请找到父项和所有子项
var parent=$（this.nestest（'ul'）。nestest（'li'）。find（'>label input[type=checkbox]'）；
var children=$（this.closest（'ul'）.find（'input[type=checkbox]）；
if（children.filter（':checked'）。长度==0）{
//如果所有子项都未选中
prop（{checked:false，undeterminate:false}）；
}else if（childrence.length==children.filter（':checked'）.length）{
//如果检查了所有子项
prop（{checked:true，undeterminate:false}）；
}否则{
//如果检查了一些孩子
prop（{checked:true，undeterminate:true}）；
}
}
});
ul{
列表样式：无；
利润率：5px20px；
}
李{
利润率：10px0；
}



红人


谢夫斯


维京人


熊




包装工


充电器


巨人


喷射机



您的解决方案看起来太复杂了这里是一个简单的版本

您需要首先确定是否更改了父或子复选框，然后分别将结果传递给相关方


$（'input[type=checkbox]'）。更改（函数（e）{
var checked=$（this.prop（'checked'）；
var isParent=！！$（this）.closest（'li'）.find（'>ul'）.length；
如果（isParent）{
//如果更改了父级复选框，请找到所有子级
var children=$（this.closest（'li'）.find（'ul input[type=checkbox]）；
儿童道具({
选中的
})；//所有的孩子都将拥有父母所拥有的
}否则{
//如果更改了子复选框，请找到父项和所有子项
var parent=$（this.nestest（'ul'）。nestest（'li'）。find（'>label input[type=checkbox]'）；
var children=$（this.closest（'ul'）.find（'input[type=checkbox]）；
if（children.filter（':checked'）。长度==0）{
//如果所有子项都未选中
prop（{checked:false，undeterminate:false}）；
}else if（childrence.length==children.filter（':checked'）.length）{
//如果检查了所有子项
prop（{checked:true，undeterminate:false}）；
}否则{
//如果检查了一些孩子
prop（{checked:true，undeterminate:true}）；
}
}
});
ul{
列表样式：无；
利润率：5px20px；
}
李{
利润率：10px0；
}



红人


谢夫斯


维京人


熊




包装工


充电器


巨人


喷射机



请注意，如果您在问题本身中包含所有必要的代码来重现问题，而不是仅在此处和外部站点上包含其他代码，那么人们就更容易回答问题。您可以使用来重现该问题。我在内容中遇到错误，说明代码太多，但我现在可以添加它@HereticMonkeyNote指出，如果您在问题本身中包含所有必要的代码来重现问题，而不是仅在此处和外部站点上复制其他问题，那么人们就更容易回答。您可以使用来重现该问题。我在内容中遇到错误，说明代码太多，但我现在可以添加它@异教徒猴子
      $('input[type="checkbox"]').change(function(e) {

      var checked = $(this).prop("checked"),
      container = $(this).parent(),
      siblings = container.siblings();

      container.find('input[type="checkbox"]').prop({
       indeterminate: false,
       checked: checked
    });

    function checkSiblings(el) {

    var parent = el.parent().parent(),
        all = true;
  console.log(parent);
    el.siblings().each(function() {
      console.log($(this))
      let returnValue = all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
      return returnValue;
    });

    if (all && checked) {
      console.log(parent.children('input[type="checkbox"]'));
      parent.children('input[type="checkbox"]').prop({
        indeterminate: false,
        checked: checked
      });
console.log(parent);
      checkSiblings(parent);

    } else if (all && !checked) {

      parent.children('input[type="checkbox"]').prop("checked", checked);
      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
      console.log(parent);
      checkSiblings(parent);

    } else {

      el.parents("li").children('input[type="checkbox"]').prop({
        indeterminate: true,
        checked: false
      });

    }

  }

  checkSiblings(container);
});