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

Live example | source

然后你会想要处理相反的情况（如果你取消选中一个祖先就取消选中父级，这样就不再检查所有的祖先了），但我把它作为练习留给你。

Answer 3

这会切换支票：http://jsfiddle.net/

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

如何检查所有孩子检查

3 个答案: