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> 或 <code><label></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></label> 或 <div> 上<br> → 完全无效，HTML 规范不支持<hr> <h3>提交时的校验表现</h3> <ul> <li>用户点击 submit 按钮时，若 checkbox 未勾选，Chrome/Firefox/Edge 会：<ul> <li>阻止表单提交</li> <li>将焦点移到该 checkbox</li> <li>显示气泡提示（如“请勾选此字段”）</li> </ul> </li> <li>这个提示无法用 CSS 直接定制样式，但可通过 <code>setCustomValidity() 覆盖文本：

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

---

最容易被忽略的一点

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

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