原生HTML表格中直接使用<input type="checkbox">即可，无需额外包裹或JS初始化；需确保type为checkbox、name/value正确设置，用vertical-align: middle对齐，监听change事件并注意后端按name接收value数组。
表格单元格里直接放 <input type="checkbox"> 就行
不用额外包裹、不用 JS 初始化，原生 HTML 就支持。只要确保 <td> 或 <th> 里写对标签，浏览器会自动渲染成可点击的复选框。
常见错误是漏掉 type="checkbox"（写成 type="check" 或直接省略），或者把 name 设成一样但没加 value，导致后端收不到具体值。
-
<td><input type="checkbox" name="item_id" value="123"></td>—— 最简可用写法 - 如果想默认选中，加
checked属性：<input type="checkbox" checked> - 多个复选框共用
name（如name="roles"）时，每个必须有不同value，否则提交只会传一个 - 别在
<input>外套<label>再加for——表格里没必要，反而容易错位；直接点击复选框本身就能触发
怎么让复选框居中对齐（不靠 CSS 搞复杂）
表格单元格默认是顶部对齐，<input type="checkbox"> 会贴着上边，看着歪。最稳的解法是给 <td> 加 style="vertical-align: middle;"，而不是折腾 margin 或 line-height。
注意：不要用 align="center"（已废弃），也不要对 <input> 单独设 display: block + margin: auto——这会让它独占一行，破坏表格流。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<td style="vertical-align: middle;"><input type="checkbox" name="active" value="true"></td> - 如果全表统一，直接写 CSS：
td { vertical-align: middle; } - 避免用
text-align: center试图“水平居中”复选框——它本来就是内联元素，text-align对它有效，但别和vertical-align混用，容易冲突
提交时怎么拿到哪些复选框被选中（后端接收逻辑）
浏览器只提交 checked 状态为 true 的复选框，且只传 value 值（不是 true/false）。如果没设 value，默认传 "on"，后端很可能误判。
典型翻车场景：前端写 <input type="checkbox" name="agree">，后端收到 agree=on，但实际想区分“同意”和“不同意”——这时候必须显式写 value。
- 正确示例：
<input type="checkbox" name="notify" value="email">→ 提交时若勾选，参数是notify=email - 多选场景：
<input type="checkbox" name="tags" value="js">和<input type="checkbox" name="tags" value="css">→ 勾选两个时，后端收到tags=["js","css"]（PHP/Python Flask/Django 都自动解析成数组） - 千万别用
id当提交值——id只用于 DOM 定位，不参与表单提交
用 JavaScript 监听复选框变化（别直接绑 click）
监听 change 事件比 click 更可靠，因为键盘空格键也能切换状态，click 捕获不到。
表格里批量操作时，别给每个复选框单独绑事件——用事件委托更轻量。
- 推荐写法：
document.querySelector('table').addEventListener('change', e => { if (e.target.type === 'checkbox') { console.log(e.target.value, e.target.checked); } }); - 如果复选框是动态生成的，事件委托是唯一靠谱方式；直接查
querySelectorAll('input[type=checkbox]')再遍历绑定，新插入的不会响应 - 别在
change回调里再调e.target.click()或手动设checked——可能触发死循环
