Ggtcf

I found a solution to select a single range of checkboxes in table created by JsGrid.

 $(document).on('click', '[type = checkbox]' , function(e) 
 if (e.shiftKey) 
 var first = $("#jsGrid input[type='checkbox']:checked").first().parent().parent().index(),
 last = $("#jsGrid input[type='checkbox']:checked").last().parent().parent().index();

 for (var i = first; i < last; i++) 
 $("#jsGrid").find("tbody tr index").eq(i).children().first().find("input[type='checkbox']").prop("checked", true);

 $("#jsGrid .jsgrid-grid-body tbody tr").eq(i).find("input[type='checkbox']").prop("checked", true)
 
 
 );

The problem with this solution is that is only allows for a single range of checkboxes.

To add multiple ranges, I can set the bottom of the range to the current row index with

last = $(this).parent().parent().index();

Now I would like to find the row index of the row with next row above that has a selected checkbox.

I would think it should be a variant of the code below.

first = $(this).prevUntil(':checkbox', 'checked').parent().parent().index(); // -1

I can't get this to work.
Or this

 first = $(this).parent().parent().prevUntil(':checkbox', 'checked').index(); // -1

HTML

<tbody>
 <tr class="jsgrid-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-alt-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-alt-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr> 
</tbody>

Thanks!

[1] ^{What I understand is: When checked the last checkbox get the nearest previous row which has checked checkbox}

$('input[type="checkbox"]:last').on('change' , function()
 if(this.checked)
 var ThisRowIndex = $(this).closest('tr').index();
 $($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()).filter(function()
 return $(this).find('input[type="checkbox"]:checked').length;
 ).each(function()
 console.log('This Nearst Row Index: '+ $(this).index() + ' Has checked checkbox');
 return false;
 );
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <tbody>
 <tr class="jsgrid-row">
 <td>1</td>
 <td><input type="checkbox" value="100" rel="898"/></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-alt-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"/></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"/></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-alt-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr> 
 </tbody>
</table>

^Explanation:- with checkbox use change event.

if(this.checked) // if this checkbox checked
 var ThisRowIndex = $(this).closest('tr').index(); // get the closest ow index when this checkbox checked
 $('table tr:lt('+ (ThisRowIndex) +')').filter(function() // use `lt()` to select the previous rows then filter them to check if there is a checked checkbox in each one or not
 return $(this).find('input[type="checkbox"]:checked').length; //check if there is a checked checkbox in each one or not
 ).each(function() // loop through the rows which has checked checkbox
 console.log('This Row With Index: '+ $(this).index() + ' Has checked checkbox'); // print the index of each row
 );

• For reverse you can use $($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()) .. see updated snippet


• 
  :last for the last element


• 
  return false; in .each() break the loop

^{Note With the above piece of code you can do a lot of things
.. Just understand the idea of it and it will be very helpful for
you}

[2] ^{And with prevUntil() to get the indexes of the rows between index checked checkbox and the shift-select checkbox}

$('input[type="checkbox"]:last').on('change' , function()
 if(this.checked)
 $(this).closest('tr').prevUntil('tr:has(input[type="checkbox"]:checked)').each(function()
 console.log($(this).index());
 );
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <tbody>
 <tr class="jsgrid-row">
 <td>1</td>
 <td><input type="checkbox" value="100" rel="898"/></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-alt-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"/></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"/></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr>
 <tr class="jsgrid-alt-row">
 <td>1</td>
 <td><input type="checkbox" rel="898"></td>
 <td>02/27/2019</td>
 <td>19122-37</td>
 <td>SMITH</td> 
 </tr> 
 </tbody>
</table>