Javascript 使用类显示和隐藏div

我编写了下面的脚本，在单击复选框时显示和隐藏div。它获取复选框值，然后用该类隐藏div。我的问题是一个div可能带有两个复选框值。如果其中一个仍被勾选，我仍然希望显示div，而不是像我的脚本当前所做的那样隐藏div。那怎么办

HTML

---

Fiddle在这里

您可以使用

每个

循环迭代

选中的

复选框，并在选中复选框的地方显示div

演示代码：

jQuery（文档）.ready（函数（$）{
$（“.filter click”）.change（函数（）{
//隐藏所有div
$（“.simple filter items div”）.hide（）
//循环通过复选框
$（“.simple filter input[类型=复选框]：选中“）。每个（函数（）{
//给他们看
$（“.simple filter items”）.find（“.”+$（this.val（））.show（）；
})
});
});

小轮车
小型摩托车
四线/直列
方框1
方框2
方框3
此解决方案与@Swati非常相似，但使用了
.filter（）
和
.map（）
方法：

$( ".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（文档）.ready（函数（$）{
$（“.filter click”）.change（函数（）{
const checked=$（'.filter click:checked'）.map（（i，c）=>c.value.get（）；
$（'.simple filter items>div'）.hide（）
.filter（checked.map（c=>`.${c}`）.join（'，'）.show（）；
});
});
。隐藏{
显示：无；
}

小轮车
小型摩托车
四线/直列
方框1
方框2
方框3

jQuery(document).ready(function($){

  $( ".filter-click" ).change(function() {

    checkboxval = $(this).val();

    $(".simple-filter-items").find("." + checkboxval).toggle();

});

});

$( ".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();
});