单选按钮互斥的关键在于name属性必须完全一致（大小写敏感），否则浏览器视作独立控件；name相同即自动成组，选一其余自动取消。
单选按钮 name 一致才能互斥选择
浏览器只认 name 属性相同的 <input type="radio"> 为一组。如果漏写或拼错 name，就变成独立控件，无法联动——这是最常踩的坑。
必须确保所有同组单选按钮的 name 值完全相同（包括大小写），例如：
<input type="radio" name="category" value="web"> Web开发<br><input type="radio" name="category" value="mobile"> 移动端<br><input type="radio" name="category" value="desktop"> 桌面端
注意：id 可以不同，但 name 必须一致；value 要有区分度，后续 JS 会靠它判断选中项。
用 change 事件监听选中变化
不要用 click——用户用键盘 Tab + 空格切换时，click 可能不触发；change 在值真正改变后才触发，更可靠。
实操建议：
- 给整组 radio 的父容器加一个唯一
id（如category-group），方便委托监听 - 用事件委托避免重复绑定：监听父容器，再用
event.target.matches('input[type="radio"]')过滤 - 读取当前选中项用
document.querySelector('input[name="category"]:checked')?.value，别依赖event.target—— 它可能是 label 或其他包裹元素
显示/隐藏下级菜单靠 data-* 属性驱动
把下级菜单和 radio 的 value 对应起来，用 data-for 或 data-target 标记关联关系，比硬编码 ID 更灵活、不易出错。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
示例结构：
<div id="submenus"> <br><div class="submenu" data-for="web">前端框架、构建工具…</div> <br><div class="submenu" data-for="mobile">Flutter、React Native…</div> <br><div class="submenu" data-for="desktop">Electron、Tauri…</div> <br> </div>
JS 中只需：
const selected = document.querySelector('input[name="category"]:checked')?.value;<br>
document.querySelectorAll('.submenu').forEach(el => {<br>
el.style.display = el.dataset.for === selected ? 'block' : 'none';<br>
});
注意：初始状态要处理——页面加载时若已有默认选中项，得手动触发一次显示逻辑；否则下级菜单可能空白。
移动端 Safari 和旧版 IE 的兼容细节
在 iOS Safari 中，radio 的 change 事件有时延迟触发（尤其配合 label 点击时）；IE11 不支持 dataset，需改用 getAttribute('data-for')。
稳妥写法：
- 监听
change后加个setTimeout(..., 0)防 Safari 延迟 - 读取 data 属性统一用
el.getAttribute('data-for')，兼容性更好 - 下级菜单用
display: none/block最稳；避免用visibility或opacity，它们不释放布局空间或影响可访问性
联动本身不复杂，难的是边界情况：比如用户没选任何 radio 时下级菜单该清空，或者多个下级区域嵌套时的层级控制——这些往往被忽略，直到上线后才发现漏掉兜底逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
