name属性必须唯一分组，同一组radio的name值须完全一致；label嵌套input可避免id冲突；JS应按name分组获取值；fieldset/legend提升可访问性与样式隔离。
name 属性必须不同，否则浏览器视为同一组
所有 input[type="radio"] 的互斥行为完全由 name 属性控制。只要两个 radio 的 name 值相同，无论它们在 DOM 中相隔多远、是否在同一个 form 内，浏览器都会强制只允许选中其中一项。
常见错误是给所有单选按钮都设成 name="choice"，结果“性别”“年龄段”“偏好口味”三组全被锁死——点完一个，其他组刚选的项立刻被取消。
- 每组逻辑上独立的选项，必须分配唯一的
name，例如：name="gender"、name="age_group"、name="flavor_preference" - 同一组内所有 radio 的
name必须完全一致（包括大小写和空格） - 不要复用已有
name，哪怕只是临时测试——浏览器缓存或 JS 逻辑可能意外依赖它
label 嵌套比 for/id 更安全，尤其面对重复结构
当页面需要多次插入同一段单选按钮 HTML（比如评论区每个帖子都有“点赞/点踩”），用 id + for 会立刻出问题：HTML 规范要求 id 全局唯一，但复制粘贴必然导致重复 id="like-btn"，此时 <label for="like-btn"> 可能绑定到第一个、最后一个，或干脆失效。
解法很简单：把 input 直接塞进 label 里，不依赖 id：
立即学习“前端免费学习笔记（深入）”；
<label> <input type="radio" name="post_action_123" value="like"> 点赞 </label> <label> <input type="radio" name="post_action_123" value="dislike"> 点踩 </label>
这样每组 label/input 自成封闭作用域，点击文字或圆圈都能触发，且无需担心 ID 冲突。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 嵌套式
label是 HTML5 正式支持的写法，无障碍支持良好 - 适用于动态渲染、模板复用、手风琴组件等场景
- 如果必须用
for，请确保每个id用数据 ID 或时间戳生成，如id="like-btn-{{post.id}}"
JavaScript 获取值时要按 name 分组取，别用全局查询
用 document.querySelectorAll('input[type="radio"]') 拿到全部 radio，再遍历判断 checked，看似可行，实则脆弱：一旦新增一组没处理的 radio，就可能覆盖前一组的值，或漏掉校验。
正确做法是明确按 name 查询每组：
const gender = document.querySelector('input[name="gender"]:checked')?.value;
const ageGroup = document.querySelector('input[name="age_group"]:checked')?.value;
或者批量提取（适合表单序列化）：
const formData = {};
['gender', 'age_group', 'flavor_preference'].forEach(name => {
const el = document.querySelector(`input[name="${name}"]:checked`);
if (el) formData[name] = el.value;
});
- 避免用
getElementsByName()—— 它返回 HTMLCollection，IE 下有兼容性坑，且不支持链式.checked查询 - 注意
querySelector找不到时返回null，务必用可选链?.value或判空 - 如果某组允许“不选”，记得后端或 JS 逻辑能识别
undefined或空字符串
fieldset/legend 不是装饰，它影响屏幕阅读器和 CSS 作用域
把每组 radio 包进 fieldset 并配 legend，不只是为了好看。对使用读屏软件的用户来说，legend 是该组的语义标题；对开发者来说，CSS 选择器可以精准限定作用范围，比如 fieldset#flavor-group input:checked + label 不会误中其他组。
结构示例：
<fieldset id="flavor-group"> <legend>您喜欢什么口味？</legend> <label><input type="radio" name="flavor" value="spicy"> 辣</label> <label><input type="radio" name="flavor" value="sweet"> 甜</label> </fieldset>
-
fieldset默认带边框和外边距，可用 CSS 重置，但别删掉它 - 多个
fieldset可嵌套，但通常一层足够；深层嵌套会让读屏体验变复杂 - 如果某组不需要视觉边框，用
border: none和padding: 0，别直接删标签
name 字符串抽成常量，或至少在项目文档中标注清楚每组的用途和约束。 
