根据两个复选框状态显示图像

Question

我正在尝试使用 HTML、CSS、JS 来实现以下目标。

我有两个复选框和 4 张图片：

• 如果都没有选中 -> 显示 Image1 - 隐藏其他人
• 如果选中第一个 -> 显示 Image2 - 隐藏其他
• 如果选中第二个 -> 显示 Image3 - 隐藏其他人
• 如果两者都被选中 -> 显示 Image4 - 隐藏其他人

 <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" />

Answer 1

使用一些 jquery 来处理显示图像

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()
    }
}

Answer 2

这应该会有所帮助：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;" />

Answer 3

目前的答案被硬编码为使用元素的 id。

我建立了一种不同的方法，其中使用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('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>