必须为 checkbox 添加 name 和 value 属性才能提交数据；name 应语义化（如 agree_to_terms），value 推荐设为 "yes"；用 label 的 for 属性关联文字以支持点击生效；required 属性可实现勾选校验；未勾选时字段不提交，后端需判空处理。
怎么用 <input type="checkbox"> 实现协议勾选框
必须加 name 和 value，否则表单提交时这个勾选状态根本不会被发出去。很多零基础的人只写 <input type="checkbox"> 就以为完事了，结果后端收不到数据。
常见错误现象：document.querySelector('input[type="checkbox"]').checked 能读到状态，但提交表单时后端收不到字段——大概率是漏了 name。
-
name建议设为语义化名称，比如agree_to_terms，别用cb1这种 -
value推荐固定为"yes"或"true"，避免空字符串或默认"on"带来解析歧义 - 如果想默认勾选，加
checked属性（注意是布尔属性，不写值：checked，不是checked="true"）
怎么把勾选框和文字“我已阅读并同意”连起来点击生效
直接写“<input>我已阅读并同意”不行——文字不是可点击区域。必须用 <label> 包裹或关联。
推荐用显式 for 关联，稳定、语义清晰、无障碍友好：
立即学习“前端免费学习笔记（深入）”；
<input type="checkbox" id="agree" name="agree_to_terms" value="yes"> <label for="agree">我已阅读并同意《用户协议》</label>
注意：id 和 for 的值必须完全一致（区分大小写），且整个页面不能重复。
- 不要用
<label><input>文字</label>这种隐式写法——虽然能用，但嵌套<input>在<label>里容易误删或结构混乱 - 文字里带链接？可以，但确保
<a>在<label>内部，且不打断语义，例如：<label>我已阅读并同意<a href="terms.html">《用户协议》</a></label>
怎么判断用户没勾选就点提交（前端校验）
HTML5 原生支持 required 属性，但注意：它对 checkbox 的作用逻辑和其他表单控件不同——不是“必填”，而是“必须为 true”。
加上 required 后，只有勾选了才能通过 form.checkValidity()，否则会触发浏览器原生提示（如“请勾选此字段”）。
- 写法：
<input type="checkbox" id="agree" name="agree_to_terms" value="yes" required> - JavaScript 主动校验：
if (!document.getElementById('agree').checked) { alert('请先同意协议'); }——比依赖required更可控，适合自定义提示样式 - 别用
required+checked同时存在，否则表单一加载就报错（因为默认未勾选但又要求必选）
为什么提交后后端收不到 checkbox 的值
Checkbox 只在勾选状态下才提交数据；未勾选时，该字段**完全不会出现在请求体中**（GET 参数里没有，POST 表单数据里也没有）。这是 HTML 规范行为，不是 bug。
所以后端不能假设字段一定存在，必须做存在性判断，而不是类型/值判断。
- PHP 示例：
if (isset($_POST['agree_to_terms']) && $_POST['agree_to_terms'] === 'yes') { ... } - Node.js（Express）示例：
if (req.body.agree_to_terms === 'yes') { ... }，但前提是确保中间件（如urlencoded）已启用且字段名拼写完全一致 - 调试技巧：用浏览器开发者工具的 Network → Form Data 标签页，点提交后看实际发了哪些键值对
最容易被忽略的一点：前后端字段名大小写、下划线/短横线风格必须严格一致，agreeToTerms 和 agree_to_terms 是两个字段。
