check all checkboxes nextUntil

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

Answer 2

Your .each() loop on elements selected with :checked processes any of the checkboxes that are checked at the time that code runs - it doesn't respond to a user clicking on the boxes.

If the idea is to respond to the user's clicks you need to to handle that event:

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

To explain that code: when one of the omzet_first checkboxes is clicked find its parent (the li), then select all of the parent's sibling up until the next omzet_first, then find the child checkboxes within those lis and set their checked property. (If the li was not the immediate parent of the input you'd use $(this).closest(".omzet_first") instead of $(this).parent().)

Demo: http://jsfiddle.net/498vw/