使用jQuery实现内容筛选，如何在未勾选任何选项时默认展示全部结果

解决方案 #

你只需要在原有逻辑基础上增加「勾选数量为0时展示所有结果」的判断即可，修改后的JS代码如下：

$(document).ready(function() {
  $('div.tags').find('input:checkbox').on('click', function() {
    // 获取已勾选的复选框集合
    const checkedInputs = $('div.tags input:checked');
    // 无勾选选项时直接展示全部结果
    if (checkedInputs.length === 0) {
      $('.results > li').show();
      return;
    }
    // 原有筛选逻辑
    $('.results > li').hide();
    checkedInputs.each(function() {
      $('.results > li.' + $(this).attr('rel')).show();
    });
  });
});

逻辑说明 #

• 点击复选框后首先统计已选中的选项数量，如果数量为0，直接展示全部列表项，结束后续逻辑
• 如果存在选中的选项，再执行原有「先隐藏全部、再匹配展示对应类别」的筛选逻辑
  该方案完全兼容你现有HTML结构，无需修改其他代码即可实现预期效果。

内容的提问来源于stack exchange，提问作者Mathieu Préaud