Javascript 取消选中多个复选框后需要重新显示内容

我有多个复选框，用于过滤另一个div中的内容，选中复选框后，只显示与该复选框相关的内容，其余内容则隐藏，当您选中更多复选框时，将显示更多内容

我遇到的问题是，当我取消选中所有框时，所有内容都会消失，而我希望在取消选中所有框时所有内容都会显示出来

$（文档）.ready（函数（）{
$（'div.tags'）.find（'input:checkbox'）.on（'click'，function（））{
$（'.results>div'）.hide（）；
$（'div.tags'）.find（'input:checked'）.each（function（）{
$（'.results>div.+$（this.attr（'rel'））.show（）；
});
});
});



1.


2.


3.


4.


5.


首先，不要监听
单击复选框上的事件；有一个专门的
change
事件。如果我用键盘切换复选框，您的
单击事件将不会触发

其次，这只是一个监听有多少复选框被找到的情况，然后相应地采取行动

$('div.tags').find('input:checkbox').on('change', function() {
    let
    els = $('.results > div').hide(),
    checked = $('div.tags').find('input:checked').each(function() {
        els.filter('.'+$(this).attr('rel')).show();
    });
    if (!checked.length) els.show(); //<-- none checked? Show all
});

$（'div.tags'）.find（'input:checkbox'）.on（'change'，function（））{
让
els=$（'.results>div'）.hide（），
checked=$（'div.tags'）.find（'input:checked'）.each（函数（）{
els.filter（'.+$（this.attr（'rel'））.show（）；
});
如果（！checked.length）els.show（）；//首先，不要侦听复选框上的
单击
事件；这有一个专用的
更改
事件。如果我用键盘切换复选框，您的
单击
事件将不会触发

其次，这只是一个监听有多少复选框被找到的情况，然后相应地采取行动

$('div.tags').find('input:checkbox').on('change', function() {
    let
    els = $('.results > div').hide(),
    checked = $('div.tags').find('input:checked').each(function() {
        els.filter('.'+$(this).attr('rel')).show();
    });
    if (!checked.length) els.show(); //<-- none checked? Show all
});

$（'div.tags'）.find（'input:checkbox'）.on（'change'，function（））{
让
els=$（'.results>div'）.hide（），
checked=$（'div.tags'）.find（'input:checked'）.each（函数（）{
els.filter（'.+$（this.attr（'rel'））.show（）；
});
如果（！checked.length）els.show（）；//这就是你要找的吗


$（文档）.ready（函数（）{
常量标记=$（'div.tags'）；
const checkbox=tags.find（'input:checkbox'）；
常量结果=$（'.results'）；
const resultsDiv=results.find（'div'）；
复选框。on（'change'，function（）{
if（checkbox.get（）.some（item=>item.checked））{
resultsDiv.hide（）；
}否则{
resultsDiv.show（）；
}
$（'div.tags'）.find（'input:checked'）.each（函数（）{
$（'.results>div.+$（this.attr（'rel'））.show（）；
});
});
})；

JS-Bin


1.


2.


3.


4.


5.


这就是你要找的吗


$（文档）.ready（函数（）{
常量标记=$（'div.tags'）；
const checkbox=tags.find（'input:checkbox'）；
常量结果=$（'.results'）；
const resultsDiv=results.find（'div'）；
复选框。on（'change'，function（）{
if（checkbox.get（）.some（item=>item.checked））{
resultsDiv.hide（）；
}否则{
resultsDiv.show（）；
}
$（'div.tags'）.find（'input:checked'）.each（函数（）{
$（'.results>div.+$（this.attr（'rel'））.show（）；
});
});
})；

JS-Bin


1.


2.


3.


4.


5.


作为旁注，我建议使用而不是CSS类来分配、引用和使用与样式无关的属性。将分配样式的类与不分配样式的类混合在一起是一种冒险。作为旁注，我建议使用而不是CSS类来分配、引用和使用与样式无关的属性。Mixing分配样式的类与不分配样式的类是一个footgun imho。我还想问，为什么这个脚本只在页脚中工作，如果我把它放在我的javascript文件中，它就不工作了。我们需要更多的信息。如果脚本被调用并且在文档中运行，没有理由出现这种情况