显示和隐藏 div 类

Question

我编写了以下脚本，在单击复选框时显示和隐藏 div。它获取复选框值，然后使用该类隐藏 div。我的问题是一个 div 可能用两个复选框值标记。如果其中一个仍然被勾选，我仍然希望显示 div 而不是像我的脚本当前那样隐藏。有什么办法呢？

HTML

    <fieldset class="simple-filter">
        <div class="filter-wrap">
            <input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
            <label for="bmx">BMX</label>
        </div>
        <div class="filter-wrap">
            <input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
            <label for="scooter">Scooter</label>
        </div>
        <div class="filter-wrap">
            <input type="checkbox" class="filter-click" name="quad" value="quad" checked>
            <label for="quad">Quad/Inline</label>
        </div>
    </fieldset>
    
    <div class="simple-filter-items">
        <div class="bmx scooter">box 1</div>
        <div class="bmx">box 2</div>
        <div class="quad">box 3</div>
    </div>

脚本：

    jQuery(document).ready(function($){
    
      $( ".filter-click" ).change(function() {
    
        checkboxval = $(this).val();
    
        $(".simple-filter-items").find("." + checkboxval).toggle();
    
      });
    
    });

小提琴在这里https://jsfiddle.net/h5as3cwb/

Answer 1

您可以使用each 循环遍历checked 复选框并显示选中复选框的div

演示代码：

jQuery(document).ready(function($) {
  $(".filter-click").change(function() {
    //hide all div
    $(".simple-filter-items div").hide()
    //loop throgh checked checkboxes
    $(".simple-filter input[type=checkbox]:checked").each(function() {
      //show them
      $(".simple-filter-items").find("." + $(this).val()).show();
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
  <div class="filter-wrap">
    <input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
    <label for="bmx">BMX</label>
  </div>
  <div class="filter-wrap">
    <input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
    <label for="scooter">Scooter</label>
  </div>
  <div class="filter-wrap">
    <input type="checkbox" class="filter-click" name="quad" value="quad" checked>
    <label for="quad">Quad/Inline</label>
  </div>
</fieldset>

<div class="simple-filter-items">

  <div class="bmx scooter">box 1</div>
  <div class="bmx">box 2</div>
  <div class="quad">box 3</div>
</div>

Answer 2

此解决方案与@Swati 的解决方案非常相似，但使用了.filter() 和.map() 方法：

$( ".filter-click" ).change(function() {
  const checked = $('.filter-click:checked').map((i,c) => c.value).get();
  $('.simple-filter-items > div').hide()
  .filter(checked.map(c => `.${c}`).join(',')).show();
});

jQuery(document).ready(function($){

    $( ".filter-click" ).change(function() {
      const checked = $('.filter-click:checked').map((i,c) => c.value).get();
      $('.simple-filter-items > div').hide()
      .filter(checked.map(c => `.${c}`).join(',')).show();
    });

});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
  <input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
  <label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
  <input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
  <label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
  <input type="checkbox" class="filter-click" name="quad" value="quad" checked>
  <label for="quad">Quad/Inline</label>
</div>
</fieldset>

<div class="simple-filter-items">

<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>