javascript - 破表过滤器

Question

再会。有这样的代码。当我选择一个过滤器项目时，第二个项目不起作用。也就是说，如果我选择水果为“Apple”且颜色为“Orange”的过滤器，它将显示额外的数据。如何修改代码解决问题？我希望它是怎样的：我选择橙色，水果是苹果，只过滤橙色苹果。这样就不会显示所有橙色水果

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

<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>

标签： javascripthtmljquery