Блог

Я написал приведенный ниже скрипт, который показывает и скрывает divs при нажатии флажка. Он получает значение флажка, а затем скрывает 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 /

Вы можете использовать each цикл для перебора checked флажков и отображения разделов, где установлен флажок

Демонстрационный код :

 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> 

Это решение очень похоже на решение @Swati, но использует методы .filter() and .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>