title: Check Checkboxes in Grouped Table Rows Only
body: <p>I'm enhancing a standard html table with the Datatables jQuery plugin. What I have is a list of invoices which are grouped by what is known as a "job" in this particualr industry. So, I  have a job description on the "grouping" table row and a list of the individual invoices within that job on subsequent table rows until we hit the next "grouping" table row that corresponds with a different job. In the last table cell on each of these table rows I have a checkbox. See image below for a basic example (sorry, had to sanitize for client).</p>
  
  <p><img src="https://i.stack.imgur.com/IABfY.png" alt="Table Row Checkboxes"></p>
  
  <p>When a user checks checkbox "#1" (see image), I want the subsequent checkboxes to be checked through "#6". So, in effect, I want the checkbox in each "grouping" row to only check the checkboxes that belong to its respective group.</p>
  
  <p><strong>HTML Code (sanitized and simplified)</strong></p>
  
  <pre><code>&lt;!--Grouping Row 1--&gt;
  &lt;tr id="group-id-example_insertjobname"&gt;
  &lt;td colspan="11" data-group="-b-insertjobname" data-group-level="0"&gt;
  &lt;input type="checkbox" class="check" name="" value=""&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;!--Grouping Row 1--&gt;
  
  &lt;tr role="row" class="odd group-item" data-group="-b-XXX"&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td class="pay"&gt;
  &lt;input type="checkbox" name="PI0" class="Invoice Open" value=""&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr role="row" class="odd group-item" data-group="-b-XXX"&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td class="pay"&gt;
  &lt;input type="checkbox" name="PI1" class="Invoice Open" value=""&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr role="row" class="odd group-item" data-group="-b-XXX"&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td class="pay"&gt;
  &lt;input type="checkbox" name="PI2" class="Invoice Open" value=""&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!--Grouping Row 2--&gt;
  &lt;tr id="group-id-example_insertjobname"&gt;
  &lt;td colspan="11" data-group="-b-insertjobname" data-group-level="0"&gt;
  &lt;input type="checkbox" class="check" name="" value=""&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;!--Grouping Row 2--&gt;
  </code></pre>
  
  <p><strong>jQuery Function</strong></p>
  
  <pre><code> $(function() {
       var ischecked = false;
       $('[id^="checkall"]').click(function(e) {
           e.stopPropagation();   
           e.preventDefault();
           if (ischecked === false) {
               $(".pay input:checkbox").prop("checked", true);
                   ischecked = true;
           } else {
               $(".pay input:checkbox").prop("checked", false);
               ischecked = false;
           }
       });
  });
  </code></pre>
  
  <p>I get why this doesn't work. I'm targeting the .pay selector when a grouping checkbox is clicked, and that selector is common to all table cells beneath all grouping levels. I just don't know where to go from here. I looked at nextUntil(), but not sure exactly how to implement that. Thanks for your help!</p>