Question

你好我想做以下事。

我有一个包含这样的复选框的列表：

<ul>
  <li class="omzet_first"><input type="checkbox" name="omzet" id="12" value="12" alt="Opbrengsten" checked="checked">Opbrengsten</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="13" value="13" alt="Netto Omzet">Netto Omzet</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="14" value="14" alt="Overige Opbrengsten">Overige Opbrengsten</li>
  <li class="omzet_first"><input type="checkbox" name="omzet" id="15" value="15" alt="Kosten van grond-en Hulpstoffen / Uitbesteed werk">Kosten van grond-en Hulpstoffen / U</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="16" value="16" alt="Inkoopprijs van de verkopen">Inkoopprijs van de verkopen</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="17" value="17" alt="Kosten uitbesteed werk">Kosten uitbesteed werk</li>
  <li class="omzet_first"><input type="checkbox" name="omzet" id="18" value="18" alt="Personeelskosten">Personeelskosten</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="19" value="19" alt="Lonen &amp; Salarissen">Lonen &amp; Salarissen</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="20" value="20" alt="Sociale lasen">Sociale lasen</li>
  <li class="omzet_second"><input type="checkbox" name="omzet" id="21" value="21" alt="Pensioen lasten">Pensioen lasten</li>
</ul>

如果选中了类omzet_first的li中的复选框，我想检查li中的所有下一个复选框，类为omzet_second，直到下一个li.omzet_first。

我尝试了这个但是没有用

$('.omzet_first input:checked').each(function() {
    $(this).nextUntil(".omzet_first", ".omzet_second input:checkbox").prop("checked", true);
});

有任何建议怎么办？

Answer 1

在您的事件处理程序中，this是复选框。您必须适当地导航DOM树（在寻找兄弟姐妹之前向上移动到.omzet_first父级，然后向下移动）。另请注意，您也应该将选择器.omzet_first与nextUntil一起使用。

$('.omzet_first input:checked').each(function() {
    $(this).closest(".omzet_first")
           .nextUntil(".omzet_first")
           .find("input:checkbox")
           .prop("checked", true);
});

Answer 2

使用.each()选择的元素上的:checked循环处理代码运行时检查的任何复选框< - >它不响应用户点击在盒子上。

如果想要回应用户的点击，您需要处理该事件：

$('.omzet_first input[type="checkbox"]').click(function() { $(this).parent().nextUntil(".omzet_first") .find('input[type="checkbox"]').prop("checked", this.checked); });

要解释该代码：当单击其中一个omzet_first复选框时，找到其父级（li），然后选择所有父级的兄弟，直到下一个omzet_first，然后找到子复选框在那些lis中并设置他们的checked属性。（如果li不是输入的直接父级，则使用$(this).closest(".omzet_first")代替$(this).parent()。）

演示：http://jsfiddle.net/498vw/

检查所有复选框nextUntil

2 个答案: