Question

I’m working on a site that has a weird html formatting. See html below. Basically when a checkbox .group is clicked on, All the .item checkboxes that follows should get checked until it hits the next .groupparent div. How would approach this. Note: there’s also a number inside <b> tags that we can also use to count the next .items that need to be checked. I appreciate your input. I’m using jQuery.

<div class="groupparent"><input type="checkbox" class="group" /><b>3</b></div>
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
<div class="groupparent"><input type="checkbox" class="group" /><b>2</b></div>
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
<div class="groupparent"><input type="checkbox" class="group" /><b>4</b></div>
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
<div class="groupparent"><input type="checkbox" class="group" /><b>6</b></div>
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />
    <input type="checkbox" class="item" />

Answer 1

I’m assuming the class name as groupparent then I think this will do

$(this).parent().nextUntil('.groupparent').filter('.item')

Demo: Fiddle

You can use jQuery.nextUntil selector here.