复选框必选需JS校验，因required无效；单选框required有效但name必须完全一致；默认checked与required共存不冲突，JS操作须用.checked属性而非setAttribute；校验提示应聚焦语义化容器。
复选框必选校验：name相同但不能靠required硬加
复选框本身不支持 required 属性的“至少选一个”语义——浏览器只把它当作单个控件处理，加了 required 只会要求“这个 checkbox 本身被勾选”，而不是“这一组里至少一个被勾选”。所以直接写 <input type="checkbox" name="hobby" required> 是无效的，提交时哪怕其他同名项都勾了，只要这个没勾就会报错。
真正可行的做法是用 JavaScript 检查同名复选框是否全未勾选：
- 用
document.querySelectorAll('input[name="hobby"]:checked')获取已勾选项 - 判断长度是否为 0，是则阻止表单提交并提示
- 后端也必须做同样校验，前端校验可绕过
如果用 PHP 或 Node.js 接收，注意 name="hobby[]" 才会让服务端收到数组；只写 name="hobby" 会导致只拿到最后一个勾选值。
单选框必选校验：required有效但name必须一致
required 对单选框组是真正起作用的——前提是所有同组 input[type="radio"] 的 name 完全相同。浏览器会把它们视为一个逻辑字段，只要其中任意一个被勾选，就满足 required 条件。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 拼写错误：比如
name="gender"和name="gander"被当成两组，各自独立触发required - 大小写混用：
name="Sex"和name="sex"在 HTML 中不等价 - 漏掉某个选项的
name属性，它就脱离分组，变成孤立控件，required对它无效
示例正确写法：<input type="radio" name="level" value="junior">初级 <input type="radio" name="level" value="senior">高级，再加 required 即可。
默认选中 + 校验冲突：checked 和 required 同时存在时的行为
给单选框或复选框加 checked 属性，能确保页面加载时有默认状态；但若此时又加了 required，并不会导致校验失败——浏览器认为“已有默认值，已满足必填”。问题出在动态场景：
- 用户手动取消勾选后，再提交，
required才真正生效 - JS 动态设置
element.checked = false后，该控件立刻失去“已填”状态，required开始拦截提交 - 但若用
setAttribute('checked', '')设置，可能不触发浏览器内部状态同步，导致校验逻辑错乱
所以 JS 控制勾选状态时，必须操作 .checked 属性，而不是属性节点。
校验提示与用户体验：label绑定和focus管理
仅靠 required 触发的原生提示（如 Chrome 的红色边框+气泡）对复选框/单选框不够友好——它往往聚焦在第一个控件上，而用户实际需要知道的是“兴趣爱好没选”这类语义化信息。
改善方式：
- 用
<label for="id"></label>显式绑定每个input，并给input加id，让点击文字也能操作控件 - 校验失败时，用
scrollIntoView()滚动到包含该组控件的<fieldset></fieldset>或最近的父容器，而非单个input - 避免在
change事件里实时校验复选框组——用户还没选完就报错，体验差；更适合放在submit事件里统一判断
最易被忽略的一点：校验逻辑必须覆盖“用户勾了一个又取消”的边界情况，尤其是单选框组只剩一个选项且被取消时，required 不会自动恢复它的 checked 状态，得靠 JS 补位或明确提示。
