Shilft выбрать несколько флажков в таблице

Question

Я нашел решение выбрать один диапазон флажков в таблице, созданной 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)
            }
        }
    });

Проблема этого решения заключается в том, что он допускает использование только одного диапазона флажков.

Чтобы добавить несколько диапазонов, я могу установить нижнюю часть диапазона для текущего индекса строки с помощью

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

Теперь я хотел бы найти индекс строки со следующей строкой выше, у которой установлен флажок.

Я думаю, это должен быть вариант кода ниже.

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

Я не могу заставить это работать. Или это

 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>

Спасибо!

Answer 1

[1] ^{Я понимаю следующее: Если установлен последний флажок, выберите ближайший предыдущий ряд, в котором установлен флажок}

$('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>

^{Объяснение:} - с checkbox использовать change событие.

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

• Для реверса вы можете использовать $($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()) .. см. Обновленный фрагмент
• :last для последнего элемента
• return false; в .each() прервать цикл

^{Примечание С помощью приведенного выше фрагмента кода вы можете делать много вещей ... Просто поймите идею этого, и она будет очень полезна для вас}

---

[2] ^{И с помощью prevUntil() для получения индексов строк между флажком «Индекс отмечен» и «Сдвиг»Установите флажок}

$('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>