Как починить фильтр таблиц?

Question

[yakamoto_r]

Имеется код с выборкой фильтров, одновременно можно поставить несколько позиций, фильтрация должна учитывать каждую выбранную позицию. То есть, если я выбираю "Яблоки" и цвет "Зеленый", я хочу, чтобы мне выводились ТОЛЬКО зеленые яблоки. А код, который я приложил, выводит ВСЕ яблоки и ВСЕ зеленые фрукты. Как связать выборку параметров фильтрации?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group list-group-flush">
     <li class="list-group-item">
       <label class="container-box">green
          <input type="checkbox" class="name" name="name" value="green" />
          <span class="checkmark"></span>
       </label>
     </li>
     <li class="list-group-item">
       <label class="container-box">yellow
          <input type="checkbox" class="name" name="name" value="yellow" />
          <span class="checkmark"></span>
       </label>
     </li>
     <li class="list-group-item">
       <label class="container-box">red
          <input type="checkbox" class="name" name="name" value="red" />
          <span class="checkmark"></span>
       </label>
     </li>
 </ul>
  <ul class="list-group list-group-flush">
     <li class="list-group-item">
       <label class="container-box">apple
          <input type="checkbox" class="name" name="name" value="apple" />
          <span class="checkmark"></span>
       </label>
     </li>
     <li class="list-group-item">
       <label class="container-box">orange
          <input type="checkbox" class="name" name="name" value="orange" />
          <span class="checkmark"></span>
       </label>
     </li>
     <li class="list-group-item">
       <label class="container-box">mandarin
          <input type="checkbox" class="name" name="name" value="mandarin" />
          <span class="checkmark"></span>
       </label>
     </li>
 </ul>
 <table>
 <thead>
  <th>Color</th>
  <th>Fruit</th>
 </thead>
 <tbody id='myTable'>
  <tr>
   <td>green</td>
   <td>apple</td>
  </tr>
  <tr>
   <td>yellow</td>
   <td>orange</td>
  </tr>
  <tr>
   <td>red</td>
   <td>mandarin</td>
  </tr>
 </tbody>
</table>

$(document).ready(function(){
  $(".name").on("click", function() {
  name_list = []
  $("#myTable tr").hide()
  var flag = 1
  $("input:checkbox[name=name]:checked").each(function(){
        flag = 0;
        var value = $.trim($(this).val().toLowerCase());
        $("#myTable tr").filter(function() {
            if($.trim($(this).text().toLowerCase().indexOf(value)) > -1)
                $(this).show()
        });
     });
    if(flag == 1)
        $("#myTable tr").show()
  });
});

Answer 1

[0xD34F]

Укажите нормальные атрибуты name для чекбоксов - соответствующие столбцам, по которым будет осуществляться фильтрация с использованием их значений. Т.е., color для первой группы, fruit для второй.

Значения отмеченных чекбоксов группируются в соответствии со значениями атрибута name.

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

const columnIndex = {
  color: 0,
  fruit: 1,
};

function filter() {
  const filters = Object.entries(Array
    .from(document.querySelectorAll('.list-group :checked'))
    .reduce((acc, n) => ((acc[n.name] ??= []).push(n.value), acc), {})
  );

  document.querySelectorAll('table tbody tr').forEach(n => {
    n.style.display = filters.some(([ k, v ]) => !v.includes(n.cells[columnIndex[k]].innerText))
      ? 'none'
      : 'block';
  });
}


document.querySelectorAll('.list-group').forEach(n => n.addEventListener('change', filter));