复选框未勾选时字段完全不提交，后端需先检查字段是否存在；多选同名复选框需用getlist或配置extended:true获取数组；需隐藏域兜底区分“未勾选”与“未出现”；框架中避免v-model直绑布尔值。
复选框没勾选时根本不会提交任何值
这是最常被忽略的前提：浏览器只把 checked 状态为 true 的 <input type="checkbox"> 加入表单数据。如果用户没勾选，该字段压根不会出现在 request.form（Python Flask）、$_POST（PHP）或 req.body（Node.js）里——不是传了 null 或空字符串，而是完全不存在。
所以后端不能写 if (req.body.newsletter === 'on') 这类判断，而得先检查字段是否存在：
if ('newsletter' in req.body) { /* 用户勾选了 */ }
常见错误现象：TypeError: Cannot read property 'xxx' of undefined，就是因为直接访问未提交的字段名。
多个同名复选框如何获取全部选中值
当多个 <input> 共享同一个 name（比如 name="hobby"），且都带 value，浏览器会把所有勾选项的 value 以数组形式提交（不同后端解析方式略有差异）：
- Flask：
request.form.getlist('hobby')返回['reading', 'coding'] - Express +
body-parser：req.body.hobby是字符串（仅第一个值）或数组（需配置extended: true） - PHP：
$_POST['hobby']是数组，但前提是 HTML 中name写成hobby[]
关键点：HTML 中 name 必须一致，且每个 <input> 都要有 value 属性（否则默认是 "on"，难以区分语义）：
<input type="checkbox" name="hobby" value="reading"> 阅读<br><input type="checkbox" name="hobby" value="coding"> 编程
想提交“未勾选”状态？得用隐藏域兜底
如果业务逻辑要求明确区分“用户没看到这个选项”和“用户看到了但拒绝勾选”，纯靠复选框做不到。必须加一个同名隐藏域，放在复选框之前：
<input type="hidden" name="agree_tos" value="0"><br><input type="checkbox" name="agree_tos" value="1">
这样：不勾选时提交 agree_tos=0；勾选时覆盖为 agree_tos=1（同名字段后提交者生效）。注意顺序不能颠倒，否则隐藏域会永远覆盖掉复选框的值。
容易踩的坑：value 用字符串 "false"/"true" 而非数字，导致后端类型判断混乱；或者隐藏域 name 拼错，变成两个独立字段。
Vue/React 等框架里别直接绑 v-model 到布尔值
在 Vue 中写 <input type="checkbox" v-model="isSubscribed"> 看似方便，但表单提交时它只提交布尔值 true/false，而原生表单提交的是字符串 "on" 或根本不提交。这会导致前后端约定断裂。
更稳妥的做法是用 @change 手动同步到一个字符串数组：
<input type="checkbox" :value="item.id">
或者用 ref 拿到原生 DOM，在提交前调用 form.submit() 保证走标准表单流——否则框架拦截了 submit 事件，你拿到的就不是浏览器原生序列化结果了。
真正麻烦的从来不是怎么取值，而是前后端对“未提交”“空字符串”“false”“0”这几种状态的语义是否对齐。多打一次日志看下 req.body 原始内容，比猜强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
