Show image based on checkbox selection

Question

I am trying to create a selection of different checkboxes that should show content based on the selections that are chosen. I managed to create show/hide different text linked to each checkbox so far.

I am now wanting to show/hide a single image based on the selections that have been made. How to go about this? Create a function to count the checkboxes that then displays an image. Something like this:

If you select 1-3 boxes show the first image, hide all other images. If you select 4-6 show the second image, hide all other images. If you select 7-9 show the third image, hide all other images. If you select all of them show the fourth image, hide all other images.

The order the selection have made doesn't make a difference. I just need to count the number of selections that have made.

CSS:

.categorya,
.categoryb,
.categoryc,
.categoryd,
.categorye,
.categoryf,
.categoryg,
.categoryh,
.categoryi {
    display: none;
    font-size: 13px;
    color: #000000;
    font-family: sans-serif;
}

HTML:

<input id="filter-categorya" class="js-toggler" type="checkbox" value="categorya">
<label for="filter-categorya">Category A
</label>

<input id="filter-categoryb" class="js-toggler" type="checkbox" value="categoryb">
<label for="filter-categoryb">Category B
</label>

<input id="filter-categoryc" class="js-toggler" type="checkbox" value="categoryc">
<label for="filter-categoryc">Category C
</label>

<input id="filter-categoryd" class="js-toggler" type="checkbox" value="categoryd">
<label for="filter-categoryd">Category D
</label>

<input id="filter-categorye" class="js-toggler" type="checkbox" value="categorye">
<label for="filter-categorye">Category E
</label>

<input id="filter-categoryf" class="js-toggler" type="checkbox" value="categoryf">
<label for="filter-categoryf">Category F
</label>

<input id="filter-categoryg" class="js-toggler" type="checkbox" value="categoryg">
<label for="filter-categoryg">Category G
</label>

<input id="filter-categoryh" class="js-toggler" type="checkbox" value="categoryh">
<label for="filter-categoryh">Category H
</label>

<input id="filter-categoryi" class="js-toggler" type="checkbox" value="categoryi">
<label for="filter-categoryi">Category I</label>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryc">C</div>
<div class="categoryd">D</div>
<div class="categorye">E</div>
<div class="categoryf">F</div>
<div class="categoryg">G</div>
<div class="categoryh">H</div>
<div class="categoryi">I</div>

<h1>Images:</h1>

<div>
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=First+image">
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=Second+image">
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=Third+image">
    <img alt="" class="js-toggle-image" src="http://dummyimage.com/600x400/000/fff&amp;text=Fourth+image">
</div>

JS:

$('input').click(function() {
    var category = $(this).val();
    if (!$(this).attr('checked')) $('.' + category).hide();
    else $('.' + category).show();
});

Code Snippet

Possible duplicate of [Show/hide div if checkbox selected](https://stackoverflow.com/questions/18421082/show-hide-div-if-checkbox-selected) — Towkir, Apr 27 '19 at 16:31

cantuket · Accepted Answer · 2019-04-27T18:09:42.673

This is one way to do it below, but you logic doesn't make sense... you only have 9 checkboxes so 'third image' === 7 - 9 and 'fourth image' === 'all selected' will overlap.

i.e. this case...

} else if (selected.length === images.length) {
   hideImagesExcept(3)
}

will never be called.

$(document).ready(function (){
  var options = $('input.js-toggler'),
      images = $('.js-toggle-image');

  $('input').click(function() {
      var category = $(this).val();
      if (!$(this).attr('checked')) $('.' + category).hide();
      else $('.' + category).show();

      var selected = options.filter(function(){
          return this.checked === true;
      })

      if (selected.length === 0) {
        images.hide();
      } else if (selected.length > 0 && selected.length < 4) {
         hideImagesExcept(0)
      } else if (selected.length > 3 && selected.length < 7) {
         hideImagesExcept(1)
      } else if (selected.length > 6 && selected.length < 10) {
         hideImagesExcept(2)
      } else if (selected.length === images.length) {
         hideImagesExcept(3)
      }
   });

   function hideImagesExcept(index) {
      var hideThese = images.filter(function (){
         return images.eq(this) !== index
      })
      hideThese.hide()
      images.eq(index).show()
   }
})

.categorya, .categoryb, .categoryc, .categoryd, .categorye, .categoryf, .categoryg, .categoryh, .categoryi {
    display:none;
    font-size:13px;
    color:#000000;
    font-family:sans-serif;
}
.js-toggle-image {
  display:none;
}
p.info{
    padding:30px 20px 0 20px;
    color:#000;
    font-family:sans-serif;
    font-size:13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="filter-categorya" class="js-toggler" type="checkbox" value="categorya"> <label for="filter-categorya">Category A
</label><br><input id="filter-categoryb" class="js-toggler" type="checkbox" value="categoryb"><label for="filter-categoryb">Category B
</label><br><input id="filter-categoryc" class="js-toggler" type="checkbox" value="categoryc"><label for="filter-categoryc">Category C
</label><br><input id="filter-categoryd" class="js-toggler" type="checkbox" value="categoryd"><label for="filter-categoryd">Category D
</label><br><input id="filter-categorye" class="js-toggler" type="checkbox" value="categorye"><label for="filter-categorye">Category E
</label><br><input id="filter-categoryf" class="js-toggler" type="checkbox" value="categoryf"><label for="filter-categoryf">Category F
</label><br><input id="filter-categoryg" class="js-toggler" type="checkbox" value="categoryg"><label for="filter-categoryg">Category G
</label><br><input id="filter-categoryh" class="js-toggler" type="checkbox" value="categoryh"><label for="filter-categoryh">Category H
</label><br><input id="filter-categoryi" class="js-toggler" type="checkbox" value="categoryi"><label for="filter-categoryi">Category I</label>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryc">C</div>
<div class="categoryd">D</div>
<div class="categorye">E</div>
<div class="categoryf">F</div>
<div class="categoryg">G</div>
<div class="categoryh">H</div>
<div class="categoryi">I</div>
&nbsp;
<p class="info">- If you select 1-3 boxes = show first image. If you select 4-6 = second image. If you select 7-9 = third image. If you select all of them = fourth image.</p>
<br>

<h1>
Images:
</h1>

<div>
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[]" src="http://dummyimage.com/600x400/000/fff&amp;text=First+image">
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[1]" src="http://dummyimage.com/600x400/000/fff&amp;text=Second+image">
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[2]" src="http://dummyimage.com/600x400/000/fff&amp;text=Third+image">
  <img alt="" class="js-toggle-image" data-show-for-checkboxes="[1,2]" src="http://dummyimage.com/600x400/000/fff&amp;text=Fourth+image">
</div>

Thank you. Works perfectly! Is it possible to hide all if none is selected? When I run code snippet all images is visible. — TobiasM, Apr 27 '19 at 17:57
Sure. I just added some css to hide them by default... `.js-toggle-image { display:none; }` — cantuket, Apr 27 '19 at 18:10

Show image based on checkbox selection

1 Answers1