在中嵌入合法，但需绑定change事件、用data-row-id标识行、委托监听、避免内联脚本和setattribute设checked，全选应操作.checked属性并手动触发change，移动端须用label包裹或扩点击区。
直接在 <td> 里放 <code><input type="checkbox"> 就行，但得加点控制逻辑
纯 HTML 层面，<td> 内嵌 <code><input type="checkbox"> 完全合法，浏览器渲染没问题。但用户真正要的不是“能显示”，而是“点一下就选中整行、支持全选/反选、数据能对得上”。所以光写 <input> 不够，得绑定行为。
常见错误是只加了 checkbox 却没设 name 或 value，导致 JS 拿不到对应哪一行；或者用 onclick="toggleRow(this)" 写内联脚本，后续维护困难、事件重复绑定。
- 每行 checkbox 的
value应该唯一标识该行（比如数据库 ID、数组索引） - 建议用
data-row-id配合value，避免 value 被意外覆盖或解析出错 - 不要用
id给每个 checkbox 命名——动态生成表格时容易重复，JS 查询也更麻烦
querySelectorAll + change 事件监听比 onclick 更可靠
用户点击 checkbox，本质是触发 change 事件（不是 click），尤其在键盘操作（空格键切换）或辅助设备场景下，change 才是语义正确的监听点。
实操建议：给表格加一个 class（比如 js-selectable-table），然后用委托方式监听：
document.querySelector('.js-selectable-table').addEventListener('change', e => {
if (e.target.type === 'checkbox' && e.target.name === 'row-select') {
const row = e.target.closest('tr');
row.classList.toggle('selected', e.target.checked);
}
});
- 用
closest('tr')向上找行，不依赖固定 DOM 结构（比如中间有没有<tbody>） <li>避免遍历所有 checkbox 绑定事件，性能更好，也兼容后续动态插入的行</li> <li>如果需要获取已选中的所有行 ID，用 <code>document.querySelectorAll('input[name="row-select"]:checked')拿value或dataset.rowId - 应该直接操作
.checked属性：cb.checked = true，这是 DOM 属性，会触发 UI 和事件 - 全选逻辑里，记得把所有目标 checkbox 的
.checked设为相同值，再手动触发一次change（如果需要联动其他逻辑） - 如果表格很大（上千行），避免在循环里频繁读写 DOM，可先收集所有 checkbox 元素，再批量操作
- 最稳妥：用
<label></label>包住 checkbox，点击 label 任意位置都等效点击 checkbox - 次选：给
input[type="checkbox"]加margin和padding，并设置cursor: pointer - 别忘了
user-select: none防止长按唤起文字选择菜单
全选 checkbox 要同步更新所有行状态，但别用 setAttribute('checked', ...)
全选框点击后，常见错误是循环调用 setAttribute('checked', true)，这只会改 HTML 属性，不会触发 change 事件，导致监听逻辑失效，样式也不更新（比如 CSS 的 :checked 伪类）。
移动端点击区域太小，label 包裹或 padding 必须加
原生 checkbox 默认尺寸很小，iOS 和 Android 上点击极易失焦或误操作。单纯靠 CSS transform: scale(1.5) 会拉伸边框、影响对齐，且不增加点击热区。
复杂点在于，如果表格列宽很窄，label 宽度可能被 td 限制住，这时候得给 td 加 white-space: nowrap 或显式设 min-width。这些细节不处理，用户第一反应就是“点不中”，而不是“功能坏了”。
