radio必填需靠required属性而非仅name相同；name仅分组，required才触发浏览器校验；每个radio须显式设value，避免空字符串；JS检测应遍历同名元素判断checked；移动端须扩大点击区域确保可选中。
radio 必填靠 required 属性，不是靠 name
name 相同只负责把一组 <input type="radio"> 归为同一逻辑组，让浏览器自动互斥；但它本身不强制用户选择。要“必填”，必须给其中任意一个 radio 加上 required 属性——而且只要加一个就够了，浏览器会把它当作整组的必填约束。
常见错误是只写 name="gender" 却漏掉 required，表单提交时完全不校验，用户可以跳过整个单选组。
-
required必须加在某个<input type="radio">元素上，不能加在<fieldset>或父容器上 - 哪怕有 10 个同 name 的 radio，也只需一个带
required；重复加多个不会报错，但无额外效果 - 如果所有 radio 都没设
required，即使 name 相同，提交时该组值为空也不会被拦截
name 相同但没 value 会导致提交空字符串
radio 的 value 决定提交时的实际值，而 name 只是分组标识。如果漏写 value，比如 <input type="radio" name="level">，点击后提交的值是空字符串 ""，后端很可能当成无效或默认值处理。
更隐蔽的问题是：多个 radio name 相同但部分没写 value，用户选中那个没 value 的选项，表单提交的字段值就是空，且浏览器不会提示。
立即学习“前端免费学习笔记（深入）”；
- 每个
<input type="radio">都应显式设置value，哪怕值是"none"或"other" - 避免用
value=""表示“未选”，因为这和未选状态在提交时无法区分 - 后端接收时，建议对 radio 字段做非空校验（不只是检查字段是否存在）
JavaScript 检测是否已选中某组 radio
用原生 JS 判断用户有没有选，不能只查 document.querySelector('input[name="plan"]:checked') 是否为 null，还要注意 DOM 加载时机和 radio 是否真在当前 form 内。
更稳妥的方式是先获取全部同名 radio，再遍历 checked 状态：
const radios = document.querySelectorAll('input[name="plan"]');
const isChecked = Array.from(radios).some(r => r.checked);
注意：如果页面有多个同 name 的 radio 组（比如不同 tab 下），querySelectorAll 会跨区域匹配，可能误判。此时应限定作用域，例如加 class 或用 form.querySelector。
- 不要依赖
radios[0].checked判断整组状态——第一个未必是用户点的那个 -
:checked伪类在没有选项被选中时返回空 NodeList，直接调用.length更安全 - 动态插入 radio 后，需重新运行检测逻辑，DOM 不会自动更新 checked 状态的缓存
移动端点击区域小导致误操作
radio 默认样式在手机上点击热区极小，用户容易点不中，以为没反应，反复点击后可能放弃或误触其他元素。这不是逻辑问题，但直接影响“必填”体验。
解决方法不是改 JS，而是扩展可点击区域：
- 用
<label>包裹 radio 或用for关联，点击文字即可选中 - 给
input[type="radio"]设置width/height+appearance: none，再用伪元素重绘，同时扩大::before尺寸 - 避免把 radio 和 label 放在 flex 容器里却不设
align-items: center，导致视觉错位，用户点 label 却没响应
name 和 required 解决的是“能不能提交”，但点不中就根本走不到那一步。这个环节出问题，后端永远收不到数据。
