直接在 <td> 中放置 <input type="checkbox"> 即可，需统一 name（如 item_id）并为每个复选框设置唯一有意义的 value（如后端可识别的 ID），避免无上下文数字或冗余 id；全选逻辑应通过 cb.checked = master.checked 直接赋值；行点击需过滤非复选框目标元素并 toggle 状态；获取选中值推荐 Array.from(...:checked).map(cb => cb.value)。
怎样用 <input type="checkbox"> 在表格每行加复选框？
直接在 <td> 里放 <input type="checkbox"> 即可，但要注意 name 和 value 的设计——否则 JS 批量操作时取不到数据。常见错误是把所有复选框写成 name="selected" 却没设 value，结果 form.querySelectorAll('input[name="selected"]:checked') 取到的全是 ""。
推荐写法：
<table>
<tr>
<td><input type="checkbox" name="item_id" value="101"></td>
<td>苹果</td>
</tr>
<tr>
<td><input type="checkbox" name="item_id" value="102"></td>
<td>香蕉</td>
</tr>
</table>
- name 统一（如
item_id），便于用document.querySelectorAll('input[name="item_id"]:checked')一次性获取 - value 必须唯一且有意义（通常是后端能识别的 ID），别用
1/2这类无上下文数字 - 避免给复选框加
id——除非单个控制需要，批量场景下反而增加维护负担
全选/取消全选按钮怎么写？
核心是监听“全选框”的 change 事件，然后同步设置所有目标复选框的 checked 属性。别用 setAttribute('checked', true)，那只是设初始状态，对已渲染的 DOM 无效。
正确做法：
立即学习“前端免费学习笔记（深入）”；
const master = document.getElementById('select-all');
const items = document.querySelectorAll('input[name="item_id"]');
master.addEventListener('change', () => {
items.forEach(cb => cb.checked = master.checked);
});
-
cb.checked = ...是直接操作 DOM 属性，实时生效 - 不要用
forEach配合setAttribute或removeAttribute，容易漏掉取消逻辑 - 如果表格支持分页或动态加载，记得每次更新 DOM 后重新绑定或用事件委托
点击整行也能勾选复选框，怎么实现？
用户习惯点行而不是小方块，但直接给 <tr> 加 onclick 容易误触——比如点到链接、按钮或其他可交互元素时触发勾选。稳妥做法是监听 tr 的点击，再找内部复选框并 toggle。
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', e => {
// 排除点击在 input、button、a 等元素上
if (e.target.matches('input[type="checkbox"], button, a')) return;
const cb = row.querySelector('input[type="checkbox"]');
if (cb) cb.checked = !cb.checked;
});
});
- 必须加
e.target.matches(...)过滤，否则点编辑按钮也会触发勾选 - 用
!cb.checked而不是固定赋值，保证点击即切换状态 - 如果表格有表头（
<thead>），确保只监听tbody tr，避免误操作
提交前怎么拿到所有勾选项的 value？
别拼字符串，也别手动遍历 push 到数组——现代浏览器直接用 Array.from() + map 最稳。
function getSelectedValues() {
return Array.from(
document.querySelectorAll('input[name="item_id"]:checked')
).map(cb => cb.value);
}
// 提交时调用
const ids = getSelectedValues(); // ['101', '102']
- 返回的是字符串数组，后端通常能直接接收；如需数字，加
Number(cb.value) - 如果没勾选任何项，
Array.from(...)返回空数组，不用额外判空 - 避免用
for...in遍历 NodeList——它可能包含非元素节点，且顺序不保证
注意：复选框本身不参与 form submit 的默认行为，除非它们在 <form> 内且 name 相同。若走 AJAX 提交，务必确认 value 值与后端约定一致——比如是否要 JSON 字符串、是否要逗号拼接，这些细节常被忽略。
