HTML复选框天然支持多选，关键在于规范结构：必设name（同组识别）、value（区分选项），推荐label包裹；避免漏name、value重复、误用id；JS获取用querySelectorAll+checked或FormData.getAll；表格中需置于td内、value唯一，全选框name应区分。
HTML 复选框本身天然支持多项自由勾选，不需要额外“开启”功能——只要结构规范、属性设置合理，用户就能随意点选多个。
基础结构要写对
每个复选框用 <input type="checkbox">，关键点有三个：
-
必须设 name 属性：相同 name 的复选框属于一组，表单提交时后端才能按组接收为数组（例如
name="tag"） -
必须设 value 属性：不设 value 时，选中提交的值默认是
"on"，无法区分具体选项；应设为有意义的标识，如value="javascript"或数据库 ID -
推荐包裹 label 标签：用
for和id关联，或直接把 input 包在 label 里，扩大点击区域，提升可访问性
避免常见失效原因
自由勾选“失灵”，多数是因为写法踩了坑：
- 漏掉
name：浏览器不会把没 name 的 checkbox 当作表单字段，JS 也查不到（form.elements不包含它） - value 全部一样（比如都写
value="1"）：提交后后端收到一堆重复 ID，无法还原用户真实选择 - 误用
id控制批量逻辑：动态生成多行时 id 容易重复，应优先靠name或 class 精准定位 - 用 click 事件监听状态变化：空格键切换、辅助设备操作会失效；必须用
change事件
JavaScript 获取已选值（实用写法）
提交前或交互中想拿到所有勾选项，推荐以下方式：
立即学习“前端免费学习笔记（深入）”；
- 获取所有已勾选的复选框元素：
document.querySelectorAll('input[name="tag"]:checked') - 提取它们的 value 组成数组：
Array.from(checkedEls).map(el => el.value) - 如果在 form 内且 name 统一，也可直接：
new FormData(form).getAll('tag')
注意：不要用 getElementsByClassName 配合循环修改 checked，实时集合可能导致跳项；优先用 querySelectorAll 静态快照。
表格场景下的自由勾选要点
若复选框放在表格中（如每行一个），需额外注意：
- 复选框必须放在
<td>里，不能直接塞进<tr>或<th>外层 - 每行复选框的
value应唯一且业务可识别（如value="user_2056"），别用行号 - 表头加全选框时，它的
name最好与数据行不同（如数据行用name="user_id"，全选框不设 name 或用name="select-all"），避免被当普通选项提交
