复选框需正确设置type="checkbox"和统一name（如name="item_id"），value应为业务主键（如value="user_abc123"）且不可为空；垂直居中用td{vertical-align:middle}，状态操作用.checked=true/false而非setattribute，获取值用queryselectorall+map。
直接在 <td> 里写 <code><input type="checkbox"> 就能用，不需要 JS 初始化、不依赖框架、不加额外 wrapper——但 name 和 value 设错，后面全白搭。
复选框必须写对 type 和 name
漏掉 type="checkbox" 或拼错成 type="check"，浏览器就当普通文本框渲染；name 不统一，JS 批量取值或后端接收时会丢数据。
-
name要一致（如name="item_id"），才能用document.querySelectorAll('input[name="item_id"]:checked')一次捞出所有已勾选项 - 多个复选框共用同一个
name，但每个必须有不同value（如value="101"、value="102"），否则提交时后端只收到最后一个 - 别用纯数字
value="1"、value="2"——没上下文，后端无法区分是用户 ID 还是序号；优先用业务主键，比如value="user_abc123" - 不要给复选框设
id（除非单个控制需要），动态生成表格时极易重复，反而干扰 JS 查询
对齐和样式别靠 margin 硬调
表格单元格默认 vertical-align: top，原生复选框会贴着上边缘，看着歪。强行用 margin-top 或 line-height 容易在不同浏览器/缩放下错位。
- 最稳方案：给
<td> 加 <code>style="vertical-align: middle;"，一行代码搞定垂直居中 - 如果全表统一，写 CSS 更干净：
td { vertical-align: middle; } - 别对
<input>自己设display: block+margin: auto——它会独占一行，破坏表格流布局 -
text-align: center对复选框水平居中有效，但别和vertical-align混用，容易冲突 - 同步状态必须用
box.checked = master.checked直接赋值布尔值 - 获取目标复选框时，用
document.querySelectorAll('tbody input[type="checkbox"]')明确排除表头全选框，避免误操作自己 - 监听事件用
change，不是click——后者不响应键盘操作（空格键） - 设置
indeterminate状态时，必须先设el.checked = false，再设el.indeterminate = true，顺序不能反 - 哪怕只是布尔开关，也显式写
value="true"或value="email"，让参数语义清晰 - 后端接收时，PHP 自动把同名多值转成数组（
$_POST['tags']是 array），但 Python/Node.js 需手动聚合同名参数，前提是前端 value 不为空 - 批量操作前，用
Array.from(document.querySelectorAll('input[name="item_id"]:checked')).map(cb => cb.value)提取值，比遍历 + 判空更简洁可靠
全选逻辑别用 setAttribute('checked', ...)
这是高频翻车点：setAttribute('checked', true) 只改 HTML 属性，不触发 DOM 状态变更，后续读 el.checked 还是 false，且无法响应键盘空格切换。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
提交前检查 value 是否为空
没设 value 的复选框，勾选后提交的值是默认的 "on"，后端一解析就懵——“agree=on”到底是同意了什么？
真正麻烦的不是加复选框，而是 value 设得含糊、name 没分组、对齐靠猜、状态靠 hack——这些细节一旦在线上环境暴露，调试成本远高于初始几行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
