radio单选框互斥需name属性完全一致，大小写、空格、拼写差异均使其独立；required仅加同组任一radio上实现必填校验；label缺失降低可用性与无障碍支持。
radio单选框的name属性必须一致才能互斥
只有name完全相同的<input type="radio">才会被浏览器识别为同一组，点击时自动取消其他选项。如果name写错大小写、多空格或拼写不一致（比如"gender"和"Gender"），它们就变成独立控件，无法互斥，更谈不上“必选”。
常见错误：复制粘贴时漏掉引号、混用中文引号、或用id代替name——id只用于DOM定位，不影响分组逻辑。
HTML5中用required属性实现必填校验
required必须加在**同组任意一个radio上**（通常加第一个），浏览器会检查该组是否有任意一项被选中。它不是加在每个radio上，否则所有都标红且无法提交。
- ✅ 正确：
<input type="radio" name="level" value="1" required> - ❌ 错误：
<input type="radio" name="level" value="1" required><input type="radio" name="level" value="2" required>（两个都required会导致初始状态全部标红，且无法通过校验） - ⚠️ 注意：
required仅触发客户端校验，提交前才提示；服务端仍需校验，因为用户可禁用JS或绕过前端
JavaScript手动判断是否已选（兼容旧浏览器或动态场景）
IE9及更早版本不支持required，或者你用JS动态插入radio时，得靠代码判断：
const radios = document.querySelectorAll('input[name="level"]');
const isChecked = Array.from(radios).some(radio => radio.checked);
if (!isChecked) {
alert('请选择一项');
}
关键点：
-
document.querySelectorAll('input[name="level"]')必须用属性选择器，不能只靠name值遍历——getElementsByName返回的是HTMLCollection，部分老环境对some不友好 - 别用
radios[0].checked代替遍历，因为默认可能没设checked，首项未必是用户选的 - 如果radio是异步加载或AJAX渲染的，确保DOM已就绪再执行判断
label标签缺失导致可点击区域太小
很多开发者只写<input>，忘了配<label></label>。结果用户只能精准点击那个小圆圈，体验差，还容易误判“没反应”。
正确写法有两种：
- 显式关联：
<input id="level1" type="radio" name="level" value="1"><label for="level1">初级</label> - 隐式包裹：
<label><input type="radio" name="level" value="1">初级</label>
后者更简洁，但注意label里不能嵌套其他交互元素（如button），否则语义混乱。
没加label不仅影响可用性，还会让屏幕阅读器无法正确播报选项含义，无障碍访问直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
