JavaScript 中实现基于分组的前端产品列表筛选（含复选框过滤）-js教程-PHP中文网

JavaScript 中实现基于分组的前端产品列表筛选（含复选框过滤）

本文介绍如何使用原生 javascript 为静态产品列表添加动态分组筛选功能：通过为每个列表项添加 data-group 属性，自动生成对应分组的复选框控件，并利用 classlist.toggle 实现点击切换显示/隐藏，无需重新渲染 dom。

本文介绍如何使用原生 javascript 为静态产品列表添加动态分组筛选功能：通过为每个列表项添加 data-group 属性，自动生成对应分组的复选框控件，并利用 classlist.toggle 实现点击切换显示/隐藏，无需重新渲染 dom。

在构建商品展示页时，常需支持用户按品类（如“热饮”“冷饮”）快速筛选内容。相比每次点击都重新生成整个列表，更高效的做法是一次性渲染全部数据，再通过 CSS 类控制显隐——这既提升性能，又保证交互流畅。

✅ 核心实现步骤

标记分组信息：在创建
元素时，将 item.group 写入 data-group 属性，便于后续选择器定位：
```
li.dataset.group = item.group;
```

动态生成筛选控件：遍历 products 提取所有唯一分组（使用 new Set() 去重），为每个分组创建一个带 name 的复选框（）和对应标签：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const allGroups = [...new Set(products.map(p => p.group))];
allGroups.forEach(group => {
  const cb = document.createElement('input');
  cb.name = group;
  cb.type = 'checkbox';
  cb.checked = true; // 默认显示该组
  cb.onchange = onCheckboxToggle;
  element.appendChild(cb);

  const label = document.createElement('label');
  label.textContent = group;
  label.htmlFor = group; // 注意：正确属性名为 htmlFor，非 for
  element.appendChild(label);
});

绑定筛选逻辑：当复选框状态改变时，查找所有 data-group 匹配的

元素，并切换 .hide 类：

const onCheckboxToggle = (e) => {
  const group = e.target.name;
  const items = document.querySelectorAll(`li[data-group="${group}"]`);
  items.forEach(item => item.classList.toggle('hide'));
};

? 完整可运行代码示例



  <style>
    .hide { display: none; }
    #filterControls { margin-bottom: 1rem; }
    #filterControls label { margin-right: 1em; }
  </style><div id="filterControls"></div>

⚠️ 注意事项与优化建议

label.for 应写作 label.htmlFor：HTML 属性 for 在 DOM API 中映射为 htmlFor（因 for 是 JavaScript 保留字）；
避免重复渲染：本方案不调用 filter() 重建数组或重写 innerHTML，而是纯 CSS 控制可见性，响应更快、无闪烁；
无障碍友好：为每个复选框添加并关联 htmlFor，确保屏幕阅读器可识别；
扩展性提示：若需支持多条件组合筛选（如“热饮 + 小于 €3”），可在 onCheckboxToggle 中收集所有已勾选分组，再用 querySelectorAll 拼接多个 [data-group="xxx"] 选择器，或改用 Array.from(...).filter() 配合 classList.contains() 动态判断。

此方法轻量、语义清晰、兼容性强，适用于中小型静态数据筛选场景，是原生 JavaScript 前端过滤的经典实践。