复选框需用checked属性判断是否勾选，推荐querySelectorAll('input[type="checkbox"]:checked')批量获取；“且”关系筛选需按name分组并用every()验证每组值；DOM更新应缓存数据并控制显隐或用DocumentFragment批量操作。
复选框值怎么批量获取并判断是否勾选
浏览器原生不提供“多条件同时满足”的筛选逻辑，得自己遍历所有 input[type="checkbox"]，用 checked 属性判断状态。别直接读 value——没勾选时它照样存在，必须结合 checked 才算有效条件。
常见错误是写成 if (elem.value)，结果未勾选的 checkbox 也进了条件；正确写法是 if (elem.checked)。建议统一用 document.querySelectorAll('input[type="checkbox"]:checked') 拿到所有已勾选项，再提取 value 或 name。
如何让多个复选框组合成“且”关系（全部匹配）
“联动筛选”常被误解为“任一勾选就显示”，但实际业务中多数要的是“只显示同时满足所有已勾选条件”的条目。比如勾选了 category=web 和 level=advanced，就得排除只满足其一的数据。
- 先收集所有勾选的条件，按
name分组（如category、level各自一组） - 对每条待筛选数据，检查它是否在每个分组里都存在对应值（例如数据的
category必须是"web"，且level必须是"advanced"） - 用
Array.every()判断是否全部满足，比嵌套if更清晰
示例逻辑片段：
const filters = {
category: ['web'],
level: ['advanced']
};
items.filter(item =>
Object.entries(filters).every(([key, values]) =>
values.includes(item[key])
)
);
DOM 更新卡顿？别每次勾选都重绘整个列表
复选框频繁切换时，如果每次都 innerHTML = '' 再逐条 append，滚动位置会丢失，CPU 也会抖动。更稳的做法是：提前把所有数据缓存为 JS 数组，筛选后只操作显隐（style.display）或用 DocumentFragment 批量插入。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
注意兼容性：IE 不支持 DocumentFragment.append()，得用 appendChild()；若用 display: none 控制显隐，确保原始 CSS 没写死 !important 覆盖。
- 初始渲染后，给每条 DOM 元素打上 data 属性（如
data-category="web" data-level="advanced"），后续筛选直接查dataset - 避免在循环里反复调用
getElementsByClassName或querySelectorAll，它们不是缓存结果 - 移动端要注意
change事件触发时机，iOS Safari 有时需监听input代替
为什么“全选/取消全选”按钮总不同步
根本原因是没同步管理“全选按钮”和“子选项”的状态映射关系。单纯监听子项 change 去更新全选框，漏掉了用户手动点全选框后反向更新子项的逻辑。
可靠做法是抽一个状态对象（如 selectedFilters = { category: new Set(['web']), level: new Set() }），所有勾选/取消动作都先更新这个对象，再由它驱动 UI 反向同步。否则容易出现：子项全勾了，全选框还是空；或者点了全选框，部分子项因 disabled 没变。
另外，indeterminate 状态（—）不能靠 JS 设置 indeterminate = true 后就完事——它不触发 change 事件，得单独监听点击并阻止默认行为，再手动切换子项状态。
实际最麻烦的从来不是勾选逻辑，而是数据字段和复选框 value 的映射关系一旦写错，筛选结果就静默失效，连 console 都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
