radio单选框设置必填需同组所有项name属性完全相同，且任一radio添加required属性；若无提示，检查name一致性、是否被disabled、是否阻止了原生表单提交。
radio 单选框怎么设置必填且触发浏览器原生提示
HTML 原生 required 属性对 是有效的，但必须满足一个关键前提：同一组 radio 必须共享相同的 name 属性值。浏览器只会在表单提交时检查该 name 下是否有任意一项被选中；如果没有，就会弹出“请填写此字段”类提示（具体文案取决于浏览器和系统语言）。
常见错误是漏写 name，或不同 radio 的 name 拼写不一致（比如大小写、空格、下划线差异），导致浏览器认为它们是独立控件，required 失效。
- 所有同组 radio 必须有完全相同的
name值，例如name="gender" -
required只需加在其中任意一个 radio 上（通常加在第一个），无需每个都加 - 不能只靠 CSS 或 JS 模拟必填逻辑——那样无法触发原生提示，也无法被屏幕阅读器正确识别
为什么加了 required 还没提示？检查这三点
即使写了 required，实际提交时仍无提示，大概率是以下情况之一：
- 多个 radio 的
name值不一致，例如name="type"和name="Type"被视为两组 - radio 被包裹在
或父级设置了disabled，导致整个组不可交互且跳过验证 - 表单提交是通过
event.preventDefault()阻止后手动提交（如用fetch），此时原生验证不会触发——必须手动调用form.checkValidity()并处理
兼容性与移动端注意事项
Chrome、Firefox、Safari（macOS/iOS 15.4+）、Edge 均支持 radio 的 required 原生校验。但 iOS Safari 在早期版本（checked），且用户未点击任何选项就提交，可能不弹提示。稳妥做法是显式设置一个默认项：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="radio" name="plan" value="basic" required><input type="radio" name="plan" value="pro" checked><input type="radio" name="plan" value="enterprise">
注意：checked 不影响 required 逻辑，只是提升体验；如果业务上确实不允许默认选中（比如“用户必须主动选择”），那就得配合 JS 做二次校验，并手动聚焦到该组第一个 radio 上以引导操作。
不要用 hidden input 模拟必填 radio
有人试图用隐藏的 配合 JS 更新值，再给它加 required，这是无效的。hidden input 不参与 radio 组的互斥逻辑，也不能被用户选择，浏览器会直接忽略其 required 校验（因为不可见且不可聚焦）。真正要校验的，永远是用户能点的那一组 visible radio。
复杂点在于：当 radio 组动态渲染（比如从 API 加载选项）、或嵌套在条件分支里时，容易漏掉 name 同步或 required 位置错配。这时候建议把 radio 组封装成最小可验证单元，每次插入前先 assert name 一致、至少一个含 required、且无重复 id。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
