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值，因为我将有几种类型的子列表需要独立切换;我不想为每组class / id值复制代码块。

我有邻居的切换，但我不得不废弃该代码。

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

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

1 个答案: