required对单选按钮组有效，但必须至少在一个同name的radio上添加；浏览器将其视为逻辑整体校验，未选时阻止提交并提示。
required 属性对单选按钮组无效？
直接加 required 到某个 <input type="radio"> 上，浏览器不会报错，但实际不生效——用户未选任何选项时，表单仍能提交。这是因为 required 在 radio 组中只作用于单个控件，而浏览器判定“该控件是否被选中”时，只看它自己，不看同 name 的其他兄弟项。
正确做法：确保同 name 的 radio 至少一个有 required
必须让同一组 radio（即 name 相同的所有 <input type="radio">）中，**至少一个**带有 required 属性。浏览器会把整组视为一个逻辑字段，只要组内任意一个 radio 被标记为 required，就触发必填校验。
实操建议：
- 所有同名 radio 必须有相同的
name值，否则不构成一组 - 只需给其中任意一个（通常第一个）加上
required，无需每个都加 - 不要给
type="radio"加required同时又设checked，否则可能掩盖用户未操作的问题 - 若用 JavaScript 动态控制，注意
required属性需在 DOM 中真实存在（element.required = true或element.setAttribute('required', '')），仅设 JS 属性不触发原生校验
示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<form> <label><input type="radio" name="gender" value="male" required> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> <label><input type="radio" name="gender" value="other"> 其他</label> <button type="submit">提交</button> </form>
常见错误现象与排查点
用户没选却没提示、表单直接提交，往往不是 required 没写，而是以下原因：
-
name值不一致：大小写、空格、拼写差异导致浏览器认为是不同组 - radio 被包裹在
<fieldset disabled>或父元素设了disabled，整个组失效 - CSS 隐藏了所有 radio（如
display: none），原生校验跳过不可见控件 - 使用了自定义 radio 样式但没同步维护原生
input的状态，校验对象仍是隐藏的原生元素 - 表单提交用了
event.preventDefault()却没手动调用checkValidity()，绕过了原生提示
兼容性与 fallback 注意事项
现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+）均支持 radio 组的 required 校验，但行为细节有差异：
- 部分旧版 Safari 对未聚焦的 radio 组首次提交时不弹红框提示，仅阻止提交并滚动到第一个
requiredradio - 没有 JS 时，纯 HTML 校验只提供基础提示（如“请填写此字段”），文案不可定制
- 若需兼容 IE10 及更早版本，必须用 JS 手动校验：
document.querySelector('input[name="gender"]:checked')是否为null - 移动端 Safari 在某些 iOS 版本中，点击 label 触发 radio 选中后，再取消选中（比如再点一次已选中的 label），可能导致校验状态异常，建议避免让用户“反选”
真正容易被忽略的是：当页面有多个 radio 组且共用同一套 JS 校验逻辑时，name 冲突或监听范围过大，会导致一个组的校验误判另一个组的状态。
