radio按钮必须用相同name属性实现互斥，value值决定提交内容且应避免中文，label包裹可提升点击体验，JS获取时需判空防止报错。
radio 按钮必须用 name 属性才能互斥
浏览器只靠 name 值判断哪些 <input type="radio"> 属于同一组，同名才“单选”。没设 name 或 name 值不同，就各自独立，点哪个都选中，毫无互斥效果。
常见错误是复制粘贴时漏改 name，比如写成：
<input type="radio" value="a"> <input type="radio" value="b">
这俩根本不会互斥。正确写法必须显式统一 name：
<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <input type="radio" name="gender" value="other"> 其他
value 值决定提交时发送的内容
表单提交或 JS 读取时，拿到的是 value 字符串，不是标签文字。用户看到“男”，后端收到的其实是 "male" —— 这个映射关系必须前后端对齐。
立即学习“前端免费学习笔记（深入）”；
- 避免用中文当
value（如value="男"），容易编码/传输出问题 -
value应该简短、合法、可预测，比如"yes"/"no"、"1"/"0"、"public"/"private" - 如果需要默认选中，加
checked属性，且只能在一个同名 radio 上生效
label 标签提升点击体验和可访问性
直接点文字不能选中 radio？那是因为没把文字和控件关联。用 <label></label> 包裹或用 for 属性绑定，才能让整个文字区域响应点击。
推荐写法（包裹式，简洁可靠）：
<label><input type="radio" name="theme" value="light"> 浅色模式</label> <label><input type="radio" name="theme" value="dark"> 深色模式</label>
不推荐用 for + id 的写法，除非已有结构无法改动；它多一步 id 管理，还容易拼错或重复。
JS 获取选中的 radio 值要小心 null
用 document.querySelector('input[name="xxx"]:checked') 是最直接的方式，但它返回 null（不是 undefined）—— 如果没人选，就真没元素，直接取 .value 会报 Cannot read property 'value' of null。
安全读取姿势：
const selected = document.querySelector('input[name="plan"]:checked');
const planValue = selected ? selected.value : '';
别用 getElementsByName 配循环，太啰嗦；也别假设一定有默认选中，用户可能还没点，或者你忘了加 checked。
样式定制时注意：原生 radio 本身很难改外观，通常靠隐藏原生控件 + 用 ::before/::after 模拟圆点，这点容易被忽略，但影响最终体验。
