复选框必须放在<td>里，不能直接塞进<th>或表格结构外；必须有name属性，多个同名复选框提交时后端才能接收数组；JS控制应使用.checked = true/false而非setAttribute；垂直居中推荐vertical-align: middle。
复选框必须放在 <td> 里，不能直接塞进 <th> 或表格结构外
浏览器会忽略表格结构外的 <input type="checkbox"> 渲染逻辑，或者导致布局错乱。常见错误是把复选框写在 <tr> 开头、<table> 外，或用 <div> 包裹后强行插入——这些都会破坏表格语义和 CSS 样式继承。
正确做法是每个复选框都作为独立单元格内容存在：
<table>
<tr>
<td><input type="checkbox" name="item" value="1"></td>
<td>苹果</td>
<td>5元</td>
</tr>
</table>
- 复选框必须有
name属性，否则提交时不会被表单收集 - 多个复选框共用同一
name（如name="selected"），后端才能收到数组形式值 - 建议为每个复选框配
value，避免提交空字符串或默认"on"
checked 属性控制默认选中，但 JS 动态修改要用 .checked = true/false
HTML 中用 checked 属性可设初始状态：<input type="checkbox" checked>。但运行时 JS 修改不能只改属性，必须操作 DOM 属性：
document.querySelector('input[value="3"]').checked = true;
如果只用 setAttribute('checked', 'checked')，在某些浏览器（尤其旧版 Safari）可能不触发视觉更新或表单序列化异常。
立即学习“前端免费学习笔记（深入）”；
-
checked是布尔属性，设为false时不要用removeAttribute('checked')，直接赋值false更可靠 - 全选/反选逻辑里，遍历所有
input[type="checkbox"]并统一设.checked，比切换 class 或属性更稳妥
获取选中项：别只依赖 form.elements，注意 name 重复与 disabled 状态
提交前想收集所有勾选项，常见误区是遍历 form.querySelectorAll('input[type="checkbox"]:checked')，但漏掉两个关键点：
- disabled 的复选框即使
checked，也不会出现在form.submit()数据中，但会被:checked伪类选中 - 如果多个复选框
name相同（如name="id"），原生form.id只返回第一个，必须用form.querySelectorAll('input[name="id"]:checked')手动提取 - 服务端接收时，PHP 用
$_POST['id']是数组，Node.js 的body-parser默认也解析为数组，但需确认中间件配置是否启用extended: true
样式对齐问题：复选框垂直居中难？用 vertical-align 比 margin 更稳
复选框在 <td> 里常偏上，有人用 margin-top 或 padding 调整，但不同浏览器渲染差异大。真正可控的方式是设置单元格内联元素对齐：
td input[type="checkbox"] { vertical-align: middle; }
配合 line-height 和字体大小一致效果更好。如果用了 reset CSS，检查是否重置了 input 的 vertical-align（默认是 baseline）。
- 避免给复选框设
display: block，会破坏行内布局流 - 不要用
transform: translateY()微调，会导致点击热区偏移 - 若表格用了
border-collapse: collapse，确保父<td>没有意外 padding 影响对齐
表格里加复选框看着简单，但 name 命名、disabled 处理、JS 控制方式、样式对齐这四点，任一疏忽都会让后续数据收集或交互出问题。
