1 
<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 值复制代码块。

我有邻居的所有孩子，但我不得不放弃那个代码。

4

1 回答 1

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 仅在您第一次更改值时才起作用。所以它会是：

$('input[name^="item-"]').change(function() {
  var checkbox = $(this), checked = checkbox.is(':checked');
  $('ul.sublist input[type="checkbox"]', checkbox.parent()).prop('checked', checked);
})
于 2012-12-21T18:30:51.937 回答