3

您好，我想做以下事情。

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

<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中的复选框时，我想与类Omzet_second一起检查LI中的所有下一个复选框，直到下一个Li.omzet_first。

我试过这个，但没有奏效

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

有什么建议怎么做吗？

4

2 回答 2

4

在您的事件处理程序中，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);
});
于 2012-07-17T07:51:37.970 回答
3

您.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/

于 2012-07-17T07:57:07.700 回答