CODEWITHSUNDEEP
javascriptjquery
caffeinehigh
caffeinehigh

Reputation: 309

Showing and hiding divs with class

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/

Upvotes: 2

Views: 72

Answers (2)

PeterKA
PeterKA

Reputation: 24638

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>

Upvotes: 2

Swati
Swati

Reputation: 28522

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>

Upvotes: 4

Related Questions