Showing and hiding divs with class

user_1837290 0
Viewed 70

I have written the below script that shows and hides divs when a checkbox is clicked. It gets the checkbox value and then hides the div with that class. My problem is a div may be tagged with two checkbox values. If one of them is still ticked I'd still like the div to be shown rather than hidden as my script currently does. What is the way around that?

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>

Script:

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

Fiddle is here https://jsfiddle.net/h5as3cwb/

jquery javascript
2 Answers

You can use each loop to iterate through checked checkboxes and show divs where checkbox is checked

Demo Code :

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>

user_106064000

This solution is very similar to @Swati's but uses the .filter() and .map() methods:

$( ".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>

user_35589310
Related