用相同name属性使多个checkbox构成一组，提交时同名参数多次发送，后端需按语言特性正确解析为数组（如PHP自动转数组、Express需urlencoded extended:true、Flask用getlist）。
怎样用
直接给多个 元素设置相同的 name 属性，浏览器就会把它们识别为一组可多选的控件。提交表单时，所有被勾选的项会以同名参数多次发送（如 hobby=reading&hobby=coding），后端按该 name 收集数组或列表即可。
关键不是“怎么让一个 checkbox 多选”，而是“怎么让多个 checkbox 协同表达同一字段的多个值”。没有所谓“多选 checkbox 组件”，只有「语义上属于同一组的多个 checkbox」。
为什么勾选后只收到最后一个值？
常见错误是给每个 设置了不同 name，比如：name="hobby1"、name="hobby2"——这样后端收不到数组，只能逐个取值，且无法感知用户到底选了几个。
正确做法是统一 name，例如：name="hobby"，再配合 value 区分选项内容：
<input type="checkbox" name="hobby" value="reading"> 阅读<br><input type="checkbox" name="hobby" value="coding"> 编程<br><input type="checkbox" name="hobby" value="gaming"> 游戏
提交后，若前两项被勾选，请求体中会出现：hobby=reading&hobby=coding。
JavaScript 怎么批量读取已勾选的 checkbox 值？
不能用 document.querySelector('input[name="hobby"]') ——它只返回第一个。得用 querySelectorAll 获取全部，再过滤出 checked 的：
const checkedValues = Array.from(
document.querySelectorAll('input[name="hobby"]:checked')
).map(el => el.value);
注意点：
-
querySelectorAll返回的是NodeList，需转成数组才能用map - 别漏掉
:checked伪类，否则会拿到所有同名 checkbox - 如果页面动态增删 checkbox，记得每次读取前重新查询，不要缓存静态 NodeList
后端接收时要注意什么？
不同语言对重复 key 的处理方式不同：
- PHP 默认将同名 checkbox 自动转为数组：
$_POST['hobby']是数组 - Node.js（如 Express）需启用
extended: true的urlencoded中间件，否则req.body.hobby只是字符串（仅最后一个值） - Python Flask 中
request.form.getlist('hobby')才能拿到全部值，get()仍只返回第一个 - Java Spring Boot 使用
@RequestParam List接收hobby
没配对或没调对方法，就容易只拿到一个值，还以为前端没传全。
真正容易被忽略的是：前后端对同名参数的解析逻辑必须匹配；光写对 HTML 不够，后端接收姿势错了，照样丢数据。
