Javascript 如何检查所有的孩子检查

嗨，我有以下结构：

<ul class="main">
  <li class="toggle">
   <input type="checkbox"> information
  </li>
  <ul>
<li class="modulo">
   <input type="checkbox"> General
</li>
<ul>
   <li class="example1">
    <input type="checkbox">
   </li>
   <li class="example2">
    <input type="checkbox">
   </li>
</ul>
  </ul>
</ul>

信息



一般的

我现在需要知道，当用户选中主父复选框时，如何将所有子复选框设置为“选中”

---

我正在使用jQuery，谢谢

您可以更改标记，如下所示：

<ul class="main">
  <li class="toggle">
   <input type="checkbox"> information
    <ul>
     <li class="example1">
      <input type="checkbox">
     </li>
     <li class="example2">
      <input type="checkbox">
     </li>
   </ul>
  </li>   

  <li class="modulo">
   <input type="checkbox"> General
   <ul>
     <li class="example1">
      <input type="checkbox">
     </li>
     <li class="example2">
      <input type="checkbox">
     </li>
   </ul>
  </li>
</ul>

---

如果您更正了标记：

<ul class="main">
    <li class="toggle">
        <input type="checkbox"> information
        <ul>
            <li class="modulo">
            <input type="checkbox"> General
            <ul>
                <li class="example1">
                <input type="checkbox">
                </li>
                <li class="example2">
                <input type="checkbox">
                </li>
            </ul>
            </li>
        </ul>
    </li>
</ul>

|

然后，您将希望处理相反的情况（如果您取消选中祖先，则取消选中父项，以便不再选中所有祖先），但我将此作为练习留给您。

这将切换检查：

---

我建议您也缩进代码以便于阅读。

您尝试了什么？您不能将

ul

作为

ul

的直接子女。因此，第一步是：修复标记。：-）您的父项和子项复选框是什么？在发布标记时，如果您以合理的方式缩进标记，它将非常有帮助，这样每个人都可以更清楚地了解标记所包含的内容。实际上，有一些附属元素是从它们的父元素中分离出来的，这很奇怪。

<ul class="main">
    <li class="toggle">
        <input type="checkbox"> information
        <ul>
            <li class="modulo">
            <input type="checkbox"> General
            <ul>
                <li class="example1">
                <input type="checkbox">
                </li>
                <li class="example2">
                <input type="checkbox">
                </li>
            </ul>
            </li>
        </ul>
    </li>
</ul>

$(".main input[type='checkbox']").click(function() {
    $(this).parent().find("input[type='checkbox']").prop("checked", this.checked);
});