jquery - 在选中的复选框上隐藏表格行

Question

我有从数据库收到的一行复选框:

<?php foreach($user_types as $user_type): ?>    
<label class="custom-control custom-checkbox input-process">
  <input type="checkbox" class="custom-control-input user-filter" data-id3="<?=$user_type['user_type']?>" name='user_type[]' value="<?=$user_type['user_type']?>">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description"><?= $user_type['user_type'] ?></span>
</label> 
<?php endforeach; ?>

通常是这样的:

我有一张包含用户的 table :

<table class="table table-bordered table-striped accordion-users">
  <thead class="thead-inverse">
    <tr>
      <th>users</th>
    </tr>                   
  </thead>
  <tfoot>
    <tr>
      <th>users</th>
    </tr>
  </tfoot>
  <tbody>
    <?php if(!empty($users)): ?>
    <?php foreach($users as $usr): ?>
      <tr class="filter-row" data-id3="<?=$usr['user_type'];?>" id="row<?=$usr['user_type'];?>"><td><?= strtolower($usr['username']); ?></td></tr>
    <?php endforeach; ?>
    <?php endif; ?>
  </tbody>
</table>

我想做的是应用过滤器。当我单击复选框时，表应仅保留所需的 user_types。

我在脚本中尝试过的内容:

$(function() {
//    console.clear();
$('.user-filter').click(function() {
    var user_type = $(this).data("id3");
    $(".accordion-users tr").each(function() {
       var trow_id = $(this).data("id3"); // Here you go
       if(trow_id === user_type){
           //$("#row"+user_type).toggle('slow');
           //$('.filter-row').toggle('slow');
           console.log(trow_id);

       }
       //console.log(trow_id);
    });    

    $('.test').html(user_type);
});        
}); 

我尝试接收表中每一行的 id 并进行比较。现在我很困惑，不知道下一步应该做什么。这方面有什么解决办法吗？谢谢您

Answer 1

我编辑了每个循环的选择器，以仅选择具有单击的复选框过滤器值的表行。然后我检查复选框是否被选中。如果选中，我将显示 tr，如果没有选中，我将隐藏 tr。

$(function() {
  $('.user-filter').click(function() {
    var user_type = $(this).data("id3");
    var checked = $(this).is(':checked');
    $(".accordion-users tr[data-id3=" + user_type + "]").each(function() {
      if (checked)
        $(this).show(); //Show if checkbox is checked
      else
        $(this).hide(); //Hide if checkbox is not checked
    });

    $('.test').html(user_type);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="custom-control custom-checkbox input-process">
  <input type="checkbox" class="custom-control-input user-filter" data-id3="FT" name='user_type[]' value="FT" checked> FT
    <input type="checkbox" class="custom-control-input user-filter" data-id3="CT" name='user_type[]' value="CT" checked> CT
</label>

<table class="table table-bordered table-striped accordion-users">
  <thead class="thead-inverse">
    <tr>
      <th>users</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>users</th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="filter-row" data-id3="CT" id="rowCT">
      <td>Usr 1 (CT)</td>
    </tr>
    <tr class="filter-row" data-id3="FT" id="rowFT">
      <td>Usr 2 (FT)</td>
    </tr>
    <tr class="filter-row" data-id3="FT" id="rowFT">
      <td>Usr 3 (FT)</td>
    </tr>

  </tbody>
</table>