required对radio生效需满足：同name组所有radio均含required属性、DOM已渲染、未disabled；动态插入或服务端条件未渲染则无效；校验须用querySelectorAll+some()实时检测checked状态。
单选按钮（radio）没有 required 属性就无法触发原生校验，但加了也不一定生效——关键在 name 分组和 DOM 渲染时机。
为什么 required 对 radio 有时没反应
浏览器只对同一 name 下的 radio 组整体做必填判断，但前提是：该组至少有一个 input 元素在 HTML 中真实存在且未被 JS 移除或禁用。
-
required必须写在每个同名radio上（不是只写一个），否则部分浏览器（如 Safari）可能忽略整组校验 - 如果页面加载后 JS 动态插入
radio元素，即使带required，浏览器也不会将其纳入初始表单校验范围 -
display: none或visibility: hidden的radio仍参与校验；但disabled的不参与 - 服务端模板渲染时，若拼出
required="{{ condition }}"导致最终没渲染出required字样（比如 condition 为 false），那它就完全不生效
用 querySelector 手动检查是否至少一个被选中
原生 required 只在表单提交时触发，且提示不可控。要提前反馈或集成到多步流程中，得自己查状态：
function isRadioGroupChecked(groupName) {
const radios = document.querySelectorAll(`input[type="radio"][name="${groupName}"]`);
return Array.from(radios).some(radio => radio.checked);
}
// 使用示例：点击“下一步”前校验
document.querySelector('.next-btn').addEventListener('click', () => {
if (!isRadioGroupChecked('question_step1')) {
alert('请选择一项');
return;
}
// 继续逻辑
});
- 必须用
querySelectorAll+some()，不能只取第一个radio看.checked—— 因为未选中时它就是false，不代表整组都没选 - 不要用
document.forms[0].elements[name]访问radio，它返回的是元素集合，但 IE 和旧版 Safari 下行为不一致 - 如果
groupName来自用户输入或属性值，注意 XSS 风险，需白名单过滤或使用document.querySelector替代字符串拼接
动态绑定按钮与对应 radio 组的推荐方式
多步骤表单里，每个“继续”按钮应明确关联一组 radio，避免靠 class 或顺序硬编码：
立即学习“前端免费学习笔记（深入）”；
<button type="button" data-radio-group="q1">下一步</button> <input type="radio" name="q1" value="a"> <input type="radio" name="q1" value="b">
JS 中直接读取 data-radio-group：
document.addEventListener('click', e => {
if (e.target.matches('[data-radio-group]')) {
const groupName = e.target.dataset.radioGroup;
if (!isRadioGroupChecked(groupName)) {
e.target.closest('.step')?.scrollIntoView({ behavior: 'smooth' });
return;
}
}
});
- 用
data-属性比依赖name更安全：按钮的name在表单提交时会作为键发送，可能污染后端数据 - 不要把校验逻辑写在内联
onclick里，事件委托更易维护、也避免重复绑定 - 如果按钮在 Shadow DOM 内，
querySelectorAll默认查不到，得用shadowRoot.querySelectorAll
最易被忽略的一点：表单重置（form.reset()）后，radio 会回到 HTML 中定义的 checked 状态，而不是你 JS 设置过的那个——所以校验逻辑永远要以当前 DOM 的 checked 属性为准，别缓存“已选中”的变量。
