如何用JavaScript实现多标签精确过滤，仅显示含全部选中标签的div？

你的代码问题出在选择器拼接的逻辑上：原代码把选中的过滤器类名用逗号分隔成多个选择器（比如.filterDiv.adobePhotoshop, .filterDiv.sketch），这是「或」的匹配规则——只要div包含任意一个选中的类就会显示，完全不符合你要的「必须包含所有选中标签」的需求。

修复后的JavaScript代码 #

const filterToggle = (e) => {
    const checkedFilters = [...document.querySelectorAll('input[type=checkbox]:checked')].map(
        (el) => el.id
      ),
      toFilter = [...document.querySelectorAll('.filterDiv')];

    if (checkedFilters.length === 0) {
      toFilter.forEach(
        (el) => el.style.display = 'flex'
      )
    } else {
      // 先隐藏所有div
      toFilter.forEach(el => el.style.display = 'none');
      // 生成「同时包含所有选中类」的选择器，比如 .filterDiv.adobePhotoshop.sketch
      const selector = `.filterDiv.${checkedFilters.join('.')}`;
      document.querySelectorAll(selector).forEach(el => el.style.display = 'flex');
    };
};

const filters = document.querySelectorAll('input[type=checkbox]');
filters.forEach(f => f.addEventListener('change', filterToggle));

修复逻辑说明 #

1. 当选中多个复选框时，不再用逗号拼接选择器，而是把所有选中的类名直接连在一起（比如选中adobePhotoshop和sketch时，选择器变成.filterDiv.adobePhotoshop.sketch）。
2. 这种选择器会只匹配同时拥有所有指定类的div，完美实现你要的「多选需全包含」的过滤规则：
   • 选中「Adobe Photoshop」和「Sketch」时，只有Project4（同时有这两个类）会显示；
   • 选中所有四个复选框时，没有div同时包含四个类，所以不会显示任何内容，符合预期。

验证效果 #

用你提供的HTML测试：

• 勾选「Adobe Photoshop」+「Sketch」：仅Project4显示；
• 勾选「Adobe Indesign」+「Adobe Illustrator」：Project1和Project2显示；
• 勾选所有四个：无内容显示；
• 取消所有勾选：所有div显示。

内容的提问来源于stack exchange，提问作者Max