使用 jQuery 独立切换复选框的嵌套列表

Question

<ul>
   <li><input type="checkbox" name="item-1" />Item 1
    <ul class="sublist">
       <li><input type="checkbox" name="item-1-sublist" />Item 1-1</li>
       <li><input type="checkbox" name="item-1-sublist" />Item 1-2</li>
       <li><input type="checkbox" name="item-1-sublist" />Item 1-3</li>
     </ul>
   </li>
   <li>
     <input type="checkbox" name="item-2" />Item 2
     <ul class="sublist">
        <li><input type="checkbox" name="item-2-sublist" />Item 2-1</li>
        <li><input type="checkbox" name="item-2-sublist" />Item 2-2</li>
        <li><input type="checkbox" name="item-2-sublist" />Item 2-3</li>
      </ul>
    </li>
</ul>

考虑到上面的代码，如果用户单击主级别复选框之一（即项目 1 或项目 2），我将如何切换相邻列表中的所有复选框与 sublist 类值？我不想使用任何其他类或 id 值，因为我将有几种类型的子列表需要独立切换；我不想为每组类/id 值复制代码块。

我有一个 toggle-all-children-of 邻居，但我不得不废弃该代码。

Answer 1

您可以使用$.parent() 函数，就像这样 (demo)：

$('input[name="item-1"], input[name="item-2"]').change(function() {
  var checkbox = $(this), checked = checkbox.is(':checked');
  $('ul.sublist input[type="checkbox"]', checkbox.parent()).attr('checked', checked);
})

如果您的孩子复选框的名称与父母的名称不同，则此代码可能会更简洁：

<ul>
   <li><input type="checkbox" name="item-1" />Item 1
    <ul class="sublist">
       <li><input type="checkbox" name="sublist-item-1-1" />Item 1-1</li>
       <li><input type="checkbox" name="sublist-item-1-2" />Item 1-2</li>
       <li><input type="checkbox" name="sublist-item-1-3" />Item 1-3</li>
     </ul>
   </li>
   <li>
     <input type="checkbox" name="item-2" />Item 2
     <ul class="sublist">
        <li><input type="checkbox" name="sublist-item-2-1" />Item 2-1</li>
        <li><input type="checkbox" name="sublist-item-2-2" />Item 2-2</li>
        <li><input type="checkbox" name="sublist-item-2-3" />Item 2-3</li>
      </ul>
    </li>
</ul>

和：

$('input[name^="item-"]').change(function() {
  var checkbox = $(this), checked = checkbox.is(':checked');
  $('ul.sublist input[type="checkbox"]', checkbox.parent()).attr('checked', checked);
})

这使用了伪选择器^=，这意味着以开头。您可以在原始 HTML 中使用它，因为您的子选择器都以名称字符串开头。

-----编辑------

为了获得更好的结果，请使用 prop 而不是 attr，有时您可以更改 attr works only the first time 值。所以应该是：

$('input[name^="item-"]').change(function() {
  var checkbox = $(this), checked = checkbox.is(':checked');
  $('ul.sublist input[type="checkbox"]', checkbox.parent()).prop('checked', checked);
})