Question

Hello I want to do the following.

I’ve got a list with checkboxes like this:

<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>

When a checkbox in the li with class omzet_first is checked I want to check all next checkboxes in the li with class omzet_second until the next li.omzet_first.

I tried this but that didnt work

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

Any suggestions how to do?

Answer 1

Inside your event handler, this is the checkbox. You have to navigate the DOM tree appropriately (move up to its .omzet_first parent before seeking siblings, then move down). Also note that you should use the selector .omzet_first with nextUntil as well.

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