HTML复选框需JavaScript实现多条件筛选；用querySelectorAll('.filter-tag:checked')获取勾选项值，转数组后map取value；交集匹配用every()而非some()；空勾选时需显式处理为显示全部；监听change事件比click更可靠；远程筛选应加防抖。
HTML 复选框本身不带筛选逻辑，所有“多条件筛选”都得靠 JavaScript 实现；直接写 <input type="checkbox"> 不会自动过滤数据，必须手动监听、收集、匹配。
如何用 querySelectorAll 获取勾选的复选框值
别用 getElementsByName 或遍历 form.elements——容易漏掉动态添加或未命名的控件。最稳的方式是给所有筛选项加统一 class（比如 filter-tag），再用 querySelectorAll 拿值：
const checkedValues = Array.from(
document.querySelectorAll('input.filter-tag:checked')
).map(cb => cb.value);
- 必须用
Array.from()或扩展运算符转成数组，否则NodeList没map方法 -
:checked伪类只匹配当前被勾选的，比手动判cb.checked更简洁 - 如果复选框没设
value，默认值是"on"，务必显式设置value
怎么用 filter() 做多条件“交集”匹配（而非并集）
用户勾选“Java”和“中级”，应只显示同时满足两项的数据，不是任一满足——这是最容易错的点。错误做法是用 some()，正确做法是用 every() 配合字段检查：
const filteredItems = allItems.filter(item => {
return checkedValues.every(val => {
if (val === 'java') return item.tags.includes('java');
if (val === 'senior') return item.level === 'senior';
return true;
});
});
- 交集逻辑的核心是：每个勾选项都必须在当前
item中成立 - 空勾选（全不选）时
checkedValues.length === 0，every()返回true，此时应显式处理为“显示全部” - 避免在
filter里反复调用includes查大数组，可提前把checkedValues转成Set提速
为什么 change 事件比 click 更可靠
用户可能用空格键切换复选框、或通过辅助工具操作，click 事件无法捕获这些行为。监听 change 才能覆盖所有触发路径：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('input.filter-tag').forEach(cb =>
cb.addEventListener('change', handleFilter)
);
-
change在控件值真正改变后才触发，不会因鼠标划过或聚焦误触发 - 不要给父容器绑
change——复选框的change不会冒泡 - 如果筛选涉及远程数据，记得在
handleFilter开头加防抖（setTimeout），避免频繁请求
真正麻烦的不是勾选状态读取，而是数据结构是否支持快速匹配：比如标签字段是字符串还是数组？是否需要忽略大小写？这些细节不提前对齐，后面八成要重写匹配逻辑。
