基于两个复选框显示图像状态

本文介绍了基于两个复选框显示图像状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个复选框和4个图像：

如果没有选中 - >显示Image1 - 隐藏其他人

如果选中1st - >显示Image2 - 隐藏其他人

如果第二个选中 - >显示Image3 - 隐藏其他人

如果两个都选中 - > show Image4 - 隐藏其他人

 < input id =chk-box1type =checkbox>复选框1< /输入> 
< input id =chk-box2type =checkbox>复选框2< /输入> 
< img alt =id =1src =1.jpg/> 
< img alt =id =2src =2.jpg/> 
< img alt =id =3src =3.jpg/> 
< img alt =id =4src =4.jpg/>

解决方案

硬编码的答案是使用元素。

我使用 js - 类来绑定javascript和数据 - 定义何时应显示哪个图像的属性。这使得代码更加硬编码，并且如果应该添加多个复选框并且应该显示图像的方式应该改变，则可以扩展这两者。

（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（'s how-image-for-checkboxes'，[showImageFor]）; }），init：function（$ checkboxes，$ images）{this。$ checkboxes = $ checkboxes;这个。$ images = $ images; this.bind（）; }}; var Image = {showForCheckboxes：[]，bind：function（）{var self = 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>< /脚本>< DIV> <标签> < input class =js-togglerdata-checkbox =1type =checkbox/>复选框1< / label> <标签> < input class =js-togglerdata-checkbox =2type =checkbox/>复选框2< / label>< / div>< div> < img alt =class =js-toggle-imagedata-show-for-checkboxes =[]src =http://dummyimage.com/600x400/000/fff&text=First+image /> < img alt =class =js-toggle-imagedata-show-for-checkboxes =[1]src =http://dummyimage.com/600x400/000/fff&text=Second+ image/> < img alt =class =js-toggle-imagedata-show-for-checkboxes =[2]src =http://dummyimage.com/600x400/000/fff&text=Third+ image/> < img alt =class =js-toggle-imagedata-show-for-checkboxes =[1,2]src =http://dummyimage.com/600x400/000/fff&text= Fourth + image/>< / div>

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 -> show Image2 - Hide others
If 2nd is checked -> show Image3 - Hide others
If both are checked -> show Image4 - Hide others

 <input id="chk-box1" type="checkbox"> checkbox 1 </input>
 <input id="chk-box2" type="checkbox" > checkbox 2 </input>
 <img alt="" id="1" src="1.jpg" />
 <img alt="" id="2" src="2.jpg" />
 <img alt="" id="3" src="3.jpg" />
 <img alt="" id="4" src="4.jpg" />

解决方案

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>

这篇关于基于两个复选框显示图像状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

CheckBoxes

基于两个复选框显示图像状态

问题描述