如何使用JavaScript实现复选框分类筛选商品卡片功能

你现有代码的核心问题是，遍历卡片时只做了内容匹配判断，没有实际操作元素的显隐属性，且取消选中时没有恢复卡片的显示状态。

可直接运行的修正代码 #

我把事件从click换成了更适配表单控件的change，同时提前缓存卡片DOM减少重复查询：

const procesadores = document.querySelector(".procesador");
// 页面加载完成后提前获取所有商品卡片，避免每次点击都遍历DOM
const productCards = document.querySelectorAll(".card");

procesadores.addEventListener("change", () => {
  const targetValue = procesadores.value.trim();
  productCards.forEach(card => {
    if (procesadores.checked) {
      // 匹配复选框对应分类的卡片显示，其余隐藏
      const matchCategory = card.textContent.includes(targetValue);
      card.style.display = matchCategory ? "block" : "none";
    } else {
      // 取消选中时所有卡片恢复默认显示
      card.style.display = "block";
    }
  })
})

优化提示 #

不推荐直接用textContent做匹配依据：如果卡片内其他无关文本刚好和复选框value重名，会出现筛选误判。更稳妥的做法是给每个卡片加自定义分类属性，比如：

<div class="card" data-category="procesador">某款处理器商品</div>
<div class="card" data-category="graphic-card">某款显卡商品</div>

对应把判断逻辑替换成属性判断即可，筛选准确率会高很多：

const matchCategory = card.dataset.category === targetValue;

如果后续要加多个分类的复选框，只要把逻辑改成每次点击时收集所有已选中的复选框value，再判断卡片分类是否在选中集合里就行，没有选中任何筛选项时默认展示全部卡片。

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