本文介绍如何使用原生 javascript 实现两级单选按钮联动：用户选择第一组（如游戏主机）后，第二组（对应游戏关卡）自动显示且仅包含相关选项，其余隐藏，无需刷新页面。
本文介绍如何使用原生 javascript 实现两级单选按钮联动：用户选择第一组（如游戏主机）后，第二组（对应游戏关卡）自动显示且仅包含相关选项，其余隐藏，无需刷新页面。
在构建交互式表单时，常需根据用户前序选择动态加载后续选项——例如先选游戏主机（SNES/N64/GBA），再从该平台专属关卡中选择。这种“依赖型单选表单”无需后端或框架，纯前端即可优雅实现。
核心思路是：监听第一组单选按钮（name="console"）的 change 事件，根据选中的 value，动态显示对应预定义的第二组选项区块，同时隐藏其他无关区块。
以下为完整、可直接运行的实现方案：
<meta charset="UTF-8"><title>依赖型单选表单示例</title><style>
.course-group { display: none; margin-top: 1rem; }
.course-group.active { display: block; }
.course-group label { display: inline-block; margin-right: 1rem; }
</style>
<script>
// 获取所有主机单选按钮和容器
const consoleRadios = document.querySelectorAll('input[name="console"]');
const courseGroups = document.querySelectorAll('.course-group');
// 监听主机选择变化
consoleRadios.forEach(radio => {
radio.addEventListener('change', () => {
const selectedConsole = radio.value;
// 隐藏所有关卡组
courseGroups.forEach(group => {
group.classList.remove('active');
});
// 显示匹配的关卡组
const targetGroup = document.querySelector(`.course-group[data-console="${selectedConsole}"]`);
if (targetGroup) {
targetGroup.classList.add('active');
}
});
});
</script>✅ 关键说明与最佳实践：
- 使用
data-console属性精准关联主从逻辑，语义清晰、易于维护； - 所有子选项统一
name="course"，确保单选互斥（同一时间仅能选一个关卡）； - CSS 控制显隐（
display: none/block），比操作innerHTML更高效、安全，避免重复绑定事件或 XSS 风险； - 不依赖外部库，兼容所有现代浏览器；
- 若需提交表单，两个
<input>均位于同一<form></form>内，提交时将同时携带console和course的值。
? 进阶提示：如需支持“取消选择”或默认展开某组，可在 JS 中增加初始化逻辑（例如默认选中 SNES 并激活其关卡组）。此外，若数据量大，可将关卡数据转为 JSON 对象，用 JS 动态渲染，进一步提升可维护性。
通过此方案，你已掌握依赖型表单的核心模式——它同样适用于地区/城市联动、产品分类/型号选择等常见业务场景。
