HTML无法实现多条件筛选，必须用JavaScript读取表单值、执行逻辑判断并控制显隐；应使用原生组织筛选项，统一监听input/change事件，通过FormData获取参数，结合data-*属性精确匹配，并同步URL确保状态可分享和回退。
HTML 本身做不了多条件筛选，所有“筛选”行为必须靠 JavaScript 驱动；你写的 <form></form> 和 <input> 只是容器和控件，真正干活的是 JS 读取值、比对逻辑、控制显隐或发请求。
为什么不能只写 HTML 就跑起来
HTML 是静态描述语言，没有判断、循环、状态记忆能力。用户点一下“部门=技术部 且 状态=启用”，浏览器不会自动遍历表格行并隐藏不匹配的——这得你写 JS 去做。常见错误现象包括：
- 点击筛选按钮页面没反应 → 缺少
submit事件监听，也没e.preventDefault() - 选了两个品牌，结果一条数据都不显示 → 用了
name="brand"的<radio></radio>而不是<checkbox></checkbox>，导致只提交一个值 - 刷新页面后筛选条件丢了 → 没把
FormData同步进 URL 查询参数或localStorage
用 <form></form> 结构组织筛选项最省事
别用 <div class="filter-form"> 包一堆 <code><input>，直接上原生 <form></form>，它自带语义、校验、重置、无障碍支持，JS 也能一键采集所有值：
-
form.elements直接拿到所有控件（含<select multiple></select>和多个同名<input type="checkbox">） -
new FormData(form)自动跳过未选中的 checkbox、合并同名 name、忽略disabled项 -
form.reset()一键还原所有输入框初始值，前提是整个结构真被包在<form></form>里 - 所有
name必须和后端 API 参数名严格一致，比如后端要?category=phone&price_min=100，前端就得写<input name="category">和<input name="price_min">，别自创ui_category或price_range
JS 怎么安全读取并执行联合过滤
别在每个 input 上单独写 filterTable()，否则用户快速改两个框，后触发的那个会覆盖前一个的结果。统一用一个函数集中读取、一次性判断：
立即学习“前端免费学习笔记（深入）”；
const form = document.querySelector('#filter-form');
form.addEventListener('input', onFilterChange);
form.addEventListener('change', onFilterChange); // 兼容 select/multiple
function onFilterChange() {
const formData = new FormData(form);
const params = Object.fromEntries(formData.entries());
// 注意：多个同名 checkbox（如 brand）只会保留最后一个值
// 要获取全部选中项，得用 Array.from(formData.entries()) 或 getAll()
const brands = formData.getAll('brand'); // 返回 ['apple', 'samsung']
const rows = document.querySelectorAll('#data-table tbody tr');
rows.forEach(row => {
const deptCell = row.cells[1].textContent.trim();
const statusCell = row.cells[2].dataset.status;
const matchesDept = !params.department || deptCell.includes(params.department);
const matchesStatus = !params.status || statusCell === params.status;
const matchesBrand = brands.length === 0 || brands.includes(row.dataset.brand);
row.style.display = matchesDept && matchesStatus && matchesBrand ? '' : 'none';
});
}
- 每个条件默认为
true（即“不限制”），避免空输入导致整行被误隐藏 - 精确匹配优先用
data-*属性存真实值（如data-status="active"），别依赖单元格文本，防格式差异 - 模糊搜索用
includes()，但注意大小写，建议统一转小写再比对 - 移动端记得给
<label></label>包住<input>，否则点不中
容易被忽略的三个复杂点
一是多选标签的激活状态管理，用 Set 存已选项比数组更安全，避免重复点击引发逻辑错乱；二是显隐控制别直接操作 style.display，用 .hidden 类配合 CSS 过渡更稳；三是 URL 同步不是可选项——用户分享链接、按浏览器后退时，筛选状态必须还原，否则体验断层。
