直接在中写即可，需确保name统一、value唯一且有意义，避免id重复；全选逻辑用queryselectorall('input[name="item_id"]')批量设置checked，并手动处理indeterminate状态。
复选框怎么加到表格每一行的单元格里？
直接在 <td> 里写 <code><input type="checkbox"> 就行，但别漏掉 name 和 value —— 否则 JS 拿不到选中项。常见错误是只加了 checkbox 却没设 value，结果批量提交时全是 on 或空字符串。
推荐写法：
<td><input type="checkbox" name="item_id" value="1001"></td>
-
name统一用相同值（如item_id），方便后端接收为数组 -
value必须唯一且有意义（通常是数据库 ID 或业务主键） - 避免用
id属性批量生成——ID 重复会导致 DOM 查询错乱 - 如果表格动态渲染（比如 Vue/React），确保每次重绘都保留
value，别被框架 key 机制意外清掉
全选/取消全选功能怎么写？
监听表头复选框的 change 事件，用 querySelectorAll('input[name="item_id"]') 批量设置 checked 状态。关键点不是“怎么勾”，而是“怎么同步状态”。
容易踩的坑：
- 用
.checked = true直接赋值，但没触发原生事件 —— 如果你依赖change做后续逻辑（比如更新计数），会漏掉 - 全选后手动取消某一项，再点全选框，应该变成“半选”状态（indeterminate），但 HTML 默认不支持，得手动设
indeterminate属性 - 表格有分页或虚拟滚动时，
querySelectorAll只拿到当前页的 checkbox，别误以为全表都被操作了
示例逻辑片段：
const master = document.querySelector('#select-all');<br>const items = document.querySelectorAll('input[name="item_id"]');<br><br>master.addEventListener('change', () => {<br> items.forEach(cb => cb.checked = master.checked);<br> updateSelectionCount(); // 别忘了更新 UI 计数<br>});
怎么安全获取所有已选中的 value？
别遍历所有 input 再判断 checked，用 document.querySelectorAll('input[name="item_id"]:checked') 一行搞定。这个伪类选择器性能好、语义准，而且天然跳过 disabled 的项。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意几个边界情况：
- 如果某行 checkbox 是
disabled但checked为 true，它不会被:checked匹配到 —— 这是预期行为，不用额外过滤 - 后端接收时，PHP 默认把同名多值解析成数组，但 Node.js 的
urlencoded中间件需配置extended: true才支持 - 如果用 AJAX 提交，建议用
Array.from()转成数组再.map()提取 value：Array.from(document.querySelectorAll('input[name="item_id"]:checked')).map(cb => cb.value)
移动端点击复选框太小，怎么提升可点区域？
原生 checkbox 本身点击热区极小，尤其在手机上几乎点不中。解决方案不是放大 checkbox，而是扩大它的 label 关联区域。
实操建议：
- 把
<input>包进<label></label>，或者用for显式绑定：<label><input type="checkbox"> 选中</label> - CSS 上给
label加display: block和足够 padding，让整行 td 都能响应点击 - 避免用 JavaScript 模拟 checkbox（比如 div + class 切换），那样会破坏语义、影响屏幕阅读器和键盘导航
- 测试时真机点一下，别只靠鼠标模拟 —— 很多 touchstart/touchend 事件处理不当会导致连点失效
复杂点在于：当表格行内还有其他交互（比如编辑按钮、展开箭头），label 的点击范围可能干扰这些操作。这时候得用 pointer-events: none 在非 checkbox 区域禁用穿透，或者改用 data-action 属性做事件委托区分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
