Javascript 基于复选框选择显示图像

我正在尝试创建一个不同复选框的选择，这些复选框应根据所选内容显示内容。到目前为止，我设法创建了显示/隐藏链接到每个复选框的不同文本

我现在想根据所做的选择显示/隐藏单个图像。怎么办？创建一个函数来计数复选框，然后显示图像。大概是这样的：

如果选择1-3个框显示第一个图像，则隐藏所有其他图像。 如果选择4-6显示第二个图像，则隐藏所有其他图像。 如果选择7-9显示第三个图像，则隐藏所有其他图像。 如果选择“全部显示第四个图像”，则隐藏所有其他图像

选择的顺序没有什么区别。我只需要数一数已经做出的选择

CSS:

HTML:

---

这是下面的一种方法，但您的逻辑没有意义。。。您只有

9

复选框，因此

第三个图像===7-9

和

第四个图像===7-9

将重叠

i、 这个案子

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

永远不会被召唤

$（文档）.ready（函数（）{
var options=$（'input.js toggler'），
图像=$（'.js切换图像'）；
$（'input'）。单击（函数（）{
var category=$（this.val（）；
if（！$（this.attr（'checked'））$（'.+category）.hide（）；
else$（'.+类别）.show（）；
var selected=options.filter（函数（）{
返回此值。选中===true；
})
如果（选定。长度===0）{
image.hide（）；
}else if（selected.length>0&&selected.length<4）{
HideImagesCept（0）
}else if（selected.length>3和selected.length<7）{
HideImageSecept（1）
}否则如果（selected.length>6和selected.length<10）{
HideImagesCEPT（2）
}else if（selected.length==images.length）{
HideImagesCEPT（3）
}
});
函数HideImagesCept（索引）{
var hideThese=images.filter（函数（）{
返回图像。eq（this）！==索引
})
隐藏
images.eq（index.show（））
}
})

.categorya、.categoryb、.categoryc、.categoryd、.categorye、.categoryf、.categoryg、.categoryh、.categoryi{
显示：无；
字体大小：13px；
颜色：#000000；
字体系列：无衬线；
}
.js切换图像{
显示：无；
}
p、 信息{
填充：30px20px20px；
颜色：#000；
字体系列：无衬线；
字体大小：13px；
}

A类

B类

C类

D类

E类

F类

G类

H类

第一类
A.
B
C
D
E
F
G
H
我
-如果选择1-3个框=显示第一个图像。如果选择4-6=第二个图像。如果选择7-9=第三个图像。如果选择全部=第四个图像


图像：

Thank you的可能副本。很好用！如果未选择任何选项，是否可以隐藏所有选项？运行代码段时，所有图像都可见。确定。我只是添加了一些css来默认隐藏它们

.js切换图像{display:none；}

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

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

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