required属性仅校验checkbox是否被勾选，不校验内容或阅读行为；生效条件为type="checkbox"且不能用于disabled、hidden元素或容器标签；提交时未勾选将阻止提交并显示默认提示，但需配合JS自定义提示和后端二次校验以满足法律合规要求。

required 属性在 <input type="checkbox"> 上的作用很明确：它只校验该复选框是否被勾选（checked），不校验内容、不触发“阅读”行为，也不管用户有没有点开协议链接。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

---

required 在 checkbox 上的生效条件

• 必须是 <input type="checkbox">，不能是 <div> 或 <label> 等容器元素
• 不能加在 <input type="hidden"> 上——浏览器直接忽略
• 不需要写 required="required"，只需 required 即可
• 如果页面加载时 checkbox 已被 JS 设置为 checked，原生校验会跳过（即视为已满足）
• 若同时存在多个同名 checkbox（如 name="agree[]"），required 仅作用于当前这个元素本身，不是“组内至少一个”

---

常见错误写法与后果

• <input type="checkbox" name="agree" required value="">
  → 后端可能收不到值（空 value 导致提交字段缺失），应显式设 value="yes" 或类似有意义的值

• <input type="checkbox" name="agree" required disabled>
  → 浏览器跳过校验（disabled 元素不参与表单提交，也不被 required 约束）

• <input type="checkbox" name="agree" required onclick="this.checked=false">
  → 用户无法勾选，但表单仍能提交（因为原生校验只看最终状态，而 JS 强制取消后状态为 false，此时提交会失败；但若 JS 有竞态或未执行，逻辑就不可靠）

• 把 required 加在包裹 checkbox 的 <label> 或 <div> 上
  → 完全无效，HTML 规范不支持

---

提交时的校验表现

• 用户点击 submit 按钮时，若 checkbox 未勾选，Chrome/Firefox/Edge 会：
  • 阻止表单提交
  • 将焦点移到该 checkbox
  • 显示气泡提示（如“请勾选此字段”）
• 这个提示无法用 CSS 直接定制样式，但可通过 setCustomValidity() 覆盖文本：

  document.getElementById('agree').oninvalid = function(e) {
  e.target.setCustomValidity('请先勾选以确认您已阅读并同意协议');
  };
  document.getElementById('agree').oninput = function() {
  this.setCustomValidity('');
  };

---

最容易被忽略的一点

required 只确保“勾选”，不确保“阅读”；而法律意义上的有效同意（如 GDPR、《个人信息保护法》）要求“清晰、主动、知情”。这意味着：

• 协议链接必须可点击、新开窗口、带 rel="noopener"
• 文案不能写成“默认同意”或“不勾选即视为同意”
• 不要隐藏协议文本、不要用极小字号或低对比度颜色
• 后端必须再次校验该字段是否存在且值非空（例如收到 agree=yes，而非缺失或 agree=）