多选框应使用 而非 ，因其支持单点切换、全选联动、键盘操作且语义明确；需确保 dom 就绪后查询、过滤 disabled 元素、反选逻辑鲁棒、前后端均校验选中项并防重复提交。
多选框用 <input type="checkbox">，别用 <select multiple></select>
批量操作场景下，用户需要勾选任意条目再执行动作（如删除、导出、标记），<select multiple></select> 天然限制交互方式：必须按住 Ctrl/Cmd 或拖拽选中，移动端几乎不可用，且视觉上不明确支持“全选/反选”逻辑。而 <input type="checkbox"> 天然支持单点切换、全选联动、键盘空格触发，语义和体验都更匹配。
常见错误是把表格行首的多选做成 <select></select> 下拉多选——这会让用户以为是在“选一个分类”，而不是“选几行数据”。
- 每一行配一个独立
<input type="checkbox" name="item_ids" value="123">，name统一便于后端接收数组 - 加一个顶部全选框：
<input type="checkbox" id="select-all">，用 JavaScript 监听其change事件同步所有行内 checkbox 的checked状态 - 避免用
disabled禁用某些 checkbox 后还参与全选逻辑——得在同步时跳过disabled元素
querySelectorAll 批量取值前先确认 DOM 已就绪
点击“批量删除”按钮时，常出现只拿到部分 checkbox 值，或根本取不到——多数因为 JS 在 DOM 渲染完成前就执行了查询。尤其在用模板字符串拼接表格、或异步加载数据后直接调用 querySelectorAll('input[name="item_ids"]:checked')，很容易漏掉动态插入的节点。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确保代码在
DOMContentLoaded之后运行，或放在 HTML 底部；若用框架（如 Vue/React），应在渲染完成回调里绑定事件 - 不要缓存
querySelectorAll结果，每次操作都重新查一次——DOM 可能已被用户手动勾选/取消 - 用
Array.from()转成数组再.map(e => e.value)，比用for...of更安全（避免类数组陷阱）
全选状态判断不能只看 checked 数量
用户点了全选，又手动取消其中一项，这时顶部“全选框”应该自动变为未选中状态。但很多人只对比“已勾选项数 == 总项数”，忽略了被 disabled 的项——比如某行因权限被禁用，它不该参与全选判定，但仍在总项数里，导致逻辑错乱。
- 统计时过滤掉
disabled元素：document.querySelectorAll('input[name="item_ids"]:not(:disabled)') - 全选框自身状态应由“可操作项中已勾选数 === 可操作项总数”决定，而非简单计数
- 反选逻辑（点击全选框时，把所有可操作 checkbox 的
checked取反）比“设为 true/false”更鲁棒，避免中间态残留
提交前校验至少选中一项，但别只靠前端
界面上提示“请至少选择一项”很必要，但这个检查必须在后端重复做一遍。前端校验可被绕过，且批量操作往往涉及数据库变更，空提交可能引发意外清空或报错。
容易被忽略的是：提交后按钮应立即 disabled，防止重复点击；同时把已选 ID 拼在 URL 或 POST body 中时，注意长度限制（IE 对 URL 长度敏感，建议走 POST）。
- 前端提示用
alert或更友好的 inline 提示，但不要阻塞整个页面 - 后端收到空
item_ids参数时，应返回明确错误（如 HTTP 400 +{"error": "no items selected"}），前端据此展示对应提示 - 如果批量操作耗时较长（如导出万级数据），需加 loading 状态并考虑接口超时处理，不能只等响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
