HTML原生JavaScript多条件筛选教程-html教程-PHP中文网

纯HTML无法实现多条件筛选，必须用JavaScript驱动；需用form+data-属性标记结构，filter()配合every()做声明式AND匹配，避免display切换混乱、大小写不一致、空值崩溃等问题。

html原生javascript多条件筛选教程

纯 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 DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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');
}</p>