本文介绍如何使用纯 JavaScript 实现基于多组复选框的精准产品筛选功能，支持在单个 data-* 属性中存储多个空格分隔值（如 data-color="red white blue"），并按“所有选中条件必须同时满足”的逻辑动态显示匹配的产品项。
本文介绍如何使用纯 javascript 实现基于多组复选框的精准产品筛选功能，支持在单个 `data-*` 属性中存储多个空格分隔值（如 `data-color="red white blue"`），并按“所有选中条件必须同时满足”的逻辑动态显示匹配的产品项。
在构建产品对比页时，常见需求是让用户通过多组独立分类（颜色、尺寸、电源类型等）进行交叉筛选。关键挑战在于：每个产品项的 data-* 属性需支持多个可选值（例如 data-color="red white blue"），而筛选逻辑应严格遵循「用户勾选的所有选项，都必须在当前产品对应属性中存在」——即AND 逻辑交集匹配，而非 OR 或部分匹配。
以下是一个健壮、可扩展的实现方案：
✅ 核心思路
- 每个复选框通过 data-filter-type 标识所属维度（如 "color"、"size"）；
- 所有已勾选的值按维度归类，形成一个映射对象：{ color: ['red', 'blue'], size: ['medium'], power: ['battery', 'solar'] }；
- 遍历每个 .productItem 元素，对其每个 data-filter-type 维度：
- 读取其 data-{type} 属性值（如 data-color），用 split(' ') 转为数组；
- 检查该维度下所有已选值是否均存在于该产品的值数组中；
- 若任一维度存在未匹配的选中项，则隐藏该产品；全部维度均满足才显示。
✅ 完整 JavaScript 实现
<script>
function applyFilters() {
// 步骤1：收集所有已选中的过滤条件（按 type 分组）
const filters = {};
document.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
const type = cb.dataset.filterType;
if (!filters[type]) filters[type] = [];
filters[type].push(cb.value);
});
// 步骤2：遍历所有产品项
document.querySelectorAll('.productItem').forEach(product => {
let shouldShow = true;
// 对每个已激活的过滤维度执行校验
for (const [type, selectedValues] of Object.entries(filters)) {
const attrName = `data-${type}`;
const productValues = (product.getAttribute(attrName) || '').trim().split(/\s+/).filter(v => v);
// 检查当前维度下，所有 selectedValues 是否都在 productValues 中
const allMatch = selectedValues.every(val => productValues.includes(val));
if (!allMatch) {
shouldShow = false;
break; // 任一维度不满足，立即终止校验
}
}
// 应用显隐
product.style.display = shouldShow ? 'block' : 'none';
});
}
// 步骤3：绑定事件监听（支持实时响应）
document.addEventListener('change', e => {
if (e.target.type === 'checkbox' && e.target.dataset.filterType) {
applyFilters();
}
});
// 初始化：首次加载时执行一次（确保默认状态正确）
document.addEventListener('DOMContentLoaded', applyFilters);
</script>⚠️ 注意事项与最佳实践
- 空格分隔安全：data-* 值中避免含不可见字符或多余空格；建议服务端或构建时标准化（如 value.trim().split(/\s+/).filter(Boolean)）；
- 大小写敏感：当前逻辑区分大小写（"Battery" ≠ "battery"），如需忽略，请统一转为小写比对（val.toLowerCase() 和 productValues.map(v => v.toLowerCase())）；
- 性能优化：若产品数量超百，可考虑节流 change 事件，或使用 DocumentFragment 批量操作 DOM；
- 无障碍支持：为 <label> 添加 for 属性或确保包裹关系正确（当前代码中 <label> 包裹 <input> 是合规的）；
- 无筛选时显示全部：当没有任何复选框被勾选时，filters 为空对象，for...of 循环不执行 → shouldShow 保持 true，所有产品显示，符合直觉。
该方案完全客户端运行，无需服务端介入，语义清晰、易于维护，并天然支持任意新增维度（只需添加对应 data-filter-type 的复选框和 data-{type} 属性即可）。
