Show Images Based On Two Checkboxes State

I am trying to achieve following using HTML, CSS, JS. I have two check boxes and 4 Images: If none of them are checked -> show Image1 - Hide others If 1st is checked -> sho

Solution 1:

Use some jquery to handle showing the images

if ($("#chk-box1").is(":checked"))
{
    if ($("#chk-box2").is(":checked"))
    {
        $("#1").hide()
        $("#2").hide()
        $("#3").hide()
        $("#4").show()
    }
    else
    {
        $("#1").hide()
        $("#2").show()
        $("#3").hide()
        $("#4").hide()
    }
}
else
{
    if ($("#chk-box2").is(":checked"))
    {
        $("#1").hide()
        $("#2").hide()
        $("#3").show()
        $("#4").hide()
    }
    else 
    {
        $("#1").show()
        $("#2").hide()
        $("#3").hide()
        $("#4").hide()
    }
}

Solution 2:

This should help : DEMO

js

var shown = 1;

function toggleImages() {
    if (document.getElementById('chk-box1').checked) {
        if (document.getElementById('chk-box2').checked) {
            showImage(4);
        } else {
            showImage(2);
        }
    } else if (document.getElementById('chk-box2').checked) {
        showImage(3);
    } else {
        showImage(1);
    }
}

function showImage(n) {
    document.getElementById(shown).style.display = 'none';
    document.getElementById(n).style.display = 'block';
    shown = n;

}

html

<input id="chk-box1" type="checkbox" onchange="toggleImages();">checkbox 1</input>
<input id="chk-box2" type="checkbox" onchange="toggleImages();">checkbox 2</input>
<br/>
<img alt="1" id="1" src="1.jpg" title="1"/>
<img alt="2" id="2" src="2.jpg" title="2" style="display:none;" />
<img alt="3" id="3" src="3.jpg" title="3" style="display:none;" />
<img alt="4" id="4" src="4.jpg" title="4" style="display:none;" />

Solution 3:

The answers insofar are hardcoded to use the id of the elements.

I have built a different approach where one uses js- classes to bind the javascript to, and data-attributes to define which image should be shown when. This makes the code much less hardcoded and can be expanded both if multiple checkboxes should be added and if the way the images should be displayed should change.

(function($, document) {
"use strict";

var $document = $(document);

var CheckboxHandler = {
  $checkboxes: null,
  $images: null,
  bind: function() {
    var self = this;

    this.$checkboxes.each(function() {
      var $checkbox = $(this);
      $checkbox.on('change', function() {
        self.triggerImageToShow();
      });
    });
  },
  triggerImageToShow: function() {
    var showImageFor = [];

    this.$checkboxes.each(function() {
      var $checkbox = $(this);
      if ($checkbox.is(':checked')) {
        showImageFor.push(parseInt($checkbox.attr('data-checkbox')));
      }
    });

    this.$images.each(function() {
      var $image = $(this);
      $image.trigger('show-image-for-checkboxes', [showImageFor]);
    })
  },
  init: function($checkboxes, $images) {
    this.$checkboxes = $checkboxes;
    this.$images = $images;
    this.bind();
  }
};

var Image = {
  showForCheckboxes: [],
  bind: function() {
    var self = this;

    this.$image.on('show-image-for-checkboxes', function(event, showForCheckboxes) {
      var isArrayEqual = JSON.stringify(showForCheckboxes) == JSON.stringify(self.showForCheckboxes)

      if (isArrayEqual) {
        self.$image.show();
      } else {
        self.$image.hide();
      }
    });
  },
  init: function($image) {
    this.$image = $image;
    this.showForCheckboxes = $image.data('show-for-checkboxes');
    this.bind();
  }
};

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

  var checkboxHandler = Object.create(CheckboxHandler);
  checkboxHandler.init($checkboxes, $images);

  var startToShowImageFor = [];

  $images.each(function() {
    var image = Object.create(Image);
    image.init($(this));
    image.$image.trigger('show-image-for-checkboxes', [startToShowImageFor]);
  });
});
}(jQuery, document));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>
    <input class="js-toggler" data-checkbox="1" type="checkbox" />checkbox 1
  </label>
  <label>
    <input class="js-toggler" data-checkbox="2" type="checkbox" />checkbox 2
  </label>
</div>
<div>

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