javascript - 如何检查所有孩子检查

Question

嗨，我有以下结构：

<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，谢谢

Answer 1

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

<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>

jQuery

$('ul.main > li > :checkbox').change(function() {
    $(this).next('ul').find(':checkbox').prop('checked', this.checked);
});

Answer 2

如果您更正标记：

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

实例| 资源

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

Answer 3

这会切换检查：http: //jsfiddle.net/

我建议你缩进你的代码以便更容易阅读。