纯HTML无法实现多条件筛选，必须用JavaScript驱动；需用form+data-属性标记结构，filter()配合every()做声明式AND匹配，避免display切换混乱、大小写不一致、空值崩溃等问题。
纯 HTML 无法实现多条件筛选，所有“点一下就过滤”行为都必须靠 JavaScript 驱动；结构上用 form + data- 属性打标，逻辑上用 filter() 做声明式匹配，否则容易陷入 display 切换混乱、大小写不一致、空值崩溃等坑。
为什么不能只写 HTML 就让筛选生效
HTML 是描述性语言，没有判断、循环、状态记忆能力。你看到的「点击品牌=Apple 显示对应商品」，背后全是 JS 在做三件事：采集当前勾选项、遍历商品元素、比对 dataset 值并控制显隐。常见错误现象包括：
- 点击 checkbox 没反应 —— 没绑
change事件或没调用过滤函数 - 勾选「Apple」和「iPhone」后结果为空 —— 把两个维度当成“或”逻辑处理，实际要“且”（
every()） - 刷新页面筛选丢失 —— 没把
FormData同步到 URL 或localStorage - 移动端点不中 ——
label没包裹input，或 touch 区域小于 44×44px
怎么用 data- 属性标记商品并避免匹配失败
必须用 data- 属性（如 data-brand="apple"、data-category="phone"），不能用 class 存业务语义，否则会因类名拼接、大小写、空格导致匹配失败。关键点：
-
value属性必须显式设置在 checkbox 上，不能依赖textContent—— 否则空格、换行、大小写全错位 - 所有
dataset值统一转小写：product.dataset.brand?.toLowerCase() - 空值容错：用可选链
?.trim()，避免undefined.trim()报错 - 不要写
el.className.includes("apple")，这种字符串匹配极易误命中（比如 "applejack"）
如何用 filter() 实现 AND 多条件匹配
用户勾选多个条件时，默认需求是“同时满足全部”，不是“满足任一”。错误做法是拼逗号选择器（.item.apple, .item.iphone），那其实是 OR；正确做法是用 Array.prototype.every() 配合 filter()：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“Java免费学习笔记（深入）”；
function applyFilter() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
const selected = Array.from(checkboxes).map(cb => ({
key: cb.name, // 如 "brand", "category"
value: cb.value.toLowerCase()
}));
<p>const products = Array.from(document.querySelectorAll('.product'));</p><p>const visible = products.filter(product =>
selected.every(s =>
product.dataset[s.key]?.toLowerCase() === s.value
)
);</p><p>products.forEach(p => p.style.display = 'none');
visible.forEach(p => p.style.display = 'block');
}- 每个 checkbox 的
name必须对应商品的dataset键（name="brand"→data-brand） - 不推荐直接操作
style.display，更稳的方式是切换.hidden类，避免覆盖原始 display 值 - 如果某维度支持多选（如多个品牌），需改用
includes()判断数组，而非严格相等
form 结构怎么搭才不容易翻车
别用一堆 div 手写筛选栏。用原生 form 标签有隐性收益：键盘导航、无障碍支持、form.elements 遍历、自动 submit 行为可拦截。关键结构：
- 整个筛选区包在
<form id="filter-form"></form>里 - 每个逻辑组（品牌、价格、评分）用
<fieldset></fieldset>隔开，标题用<legend></legend> - 品牌/分类用
<input type="checkbox" name="brand" value="apple">，不是自定义 span - 价格区间拆成两个字段：
<input name="price_min">和<input name="price_max"> - 所有
name必须和后端 API 参数名一致，避免前端叫ui_brand、后端收不到
最易被忽略的是：多条件 AND 匹配时，一旦某个条件值为空（比如 data-brand=""），every() 会直接返回 false 导致整条商品被过滤掉——务必提前清洗数据或加默认 fallback。
