通过 javascript 监听主单选按钮变化，动态显示对应子选项组，可轻松构建如“选择游戏主机 → 显示该主机专属关卡”的级联单选菜单。
通过 javascript 监听主单选按钮变化，动态显示对应子选项组，可轻松构建如“选择游戏主机 → 显示该主机专属关卡”的级联单选菜单。
在 Web 表单中实现“依赖型单选菜单”（即：先选一个分类，再根据所选动态展示对应的子选项），是前端交互中的经典需求。其核心逻辑是：监听主单选按钮（如游戏主机）的 change 事件，根据选中的值，仅显示匹配的子选项容器，同时隐藏其余无关项。
以下是一个完整、可直接运行的实现方案（含 HTML 结构、CSS 样式与轻量 JS 控制逻辑）：
<meta charset="UTF-8"><title>级联单选菜单示例</title><style>
.course-group { display: none; margin-top: 1rem; padding-left: 1.5rem; }
.course-group.active { display: block; }
.console-label { cursor: pointer; user-select: none; }
.course-label { cursor: pointer; user-select: none; }
</style>
SNES 可选关卡：
N64 可选关卡：
GBA 可选关卡：
✅ 关键要点说明：
-
语义清晰：使用
data-console属性将子选项组与主选项值一一绑定，避免硬编码 ID 或复杂字符串拼接； -
性能友好：仅操作 CSS 类（
.active），不修改 DOM 结构或 innerHTML，更安全、更易维护； -
无障碍友好：所有
<label></label>正确关联<input>（通过for属性），支持键盘导航与屏幕阅读器； -
可扩展性强：新增主机只需添加一个 radio + 一个
.course-group[data-console="XXX"]，JS 逻辑无需改动。
⚠️ 注意事项：
- 确保所有
name="console"的单选按钮在同一表单内，否则checked状态可能异常； - 子选项的
name="course"应保持统一（本例中所有关卡共用一个字段名），便于后端统一接收； - 若需提交完整表单，建议将
.course-groups区域也包裹在<form></form>内，并确保action和method设置正确。
掌握这一模式后，你可轻松将其迁移到其他场景：如“选择国家 → 显示省份”、“选择课程类型 → 显示具体课时”等，真正实现灵活、可复用的表单交互。
