如何基于单选框选项实现关联依赖的单选表单？

提问内容 #

我是HTML/CSS/JS新手，想做一个联动菜单：选中某个主机的单选按钮后，显示对应主机的赛道单选选项（比如选SNES就显示对应的赛道选项）。

现有主机选择的HTML代码：

<form>
  <div class="original-game-selector">
    <input id="SNES" type="radio" name="console" value="SNES" />
    <label class="console SNES" for="SNES"></label><br>
    <input id="N64" type="radio" name="console" value="N64" />
    <label class="console N64"for="N64"></label><br>
    <input id="GBA" type="radio" name="console" value="GBA" />
    <label class="console GBA"for="GBA"></label><br>
    <input id="GCN" type="radio" name="console" value="GCN" />
    <label class="console GCN"for="GCN"></label><br>
    <input id="DS" type="radio" name="console" value="DS" />
    <label class="console DS"for="DS"></label><br>
  </div>
</form>

我还想添加关联的赛道表单，比如SNES对应的赛道代码如下：

<form action="">
  <div class="Courses">
    <input id="SNES Bowser Castle 3" type="radio" name="course" value="Bowser Castle 3" />
    <label class="course SNES-Bowser-Castle-3" for="SNES Bowser Castle 3"></label><br>
    <input id="SNES Donut Plains 3" type="radio" name="course" value="Donut Plains 3" />
    <label class="course SNES-Donut-Plains-3" for="SNES Donut Plains 3"></label><br>
  </div>
</form>

目前还没尝试太多方法，谷歌搜了也没找到合适的帮助，求指导。

解决方案（新手友好版） #

给你一套简单易懂的实现步骤，都是基础语法，容易上手：

1. 调整HTML结构

• 把两个form合并成一个，不需要分开表单，因为是关联的内容
• 给每个主机的赛道单独做一个容器，加专属类名（比如SNES的赛道容器加course-group course-group-snes）
• 默认把所有赛道容器设为隐藏

调整后的完整HTML示例：

<form>
  <!-- 主机选择区 -->
  <div class="original-game-selector">
    <input id="SNES" type="radio" name="console" value="SNES" />
    <label class="console SNES" for="SNES">SNES</label><br>
    <input id="N64" type="radio" name="console" value="N64" />
    <label class="console N64" for="N64">N64</label><br>
    <input id="GBA" type="radio" name="console" value="GBA" />
    <label class="console GBA" for="GBA">GBA</label><br>
    <input id="GCN" type="radio" name="console" value="GCN" />
    <label class="console GCN" for="GCN">GCN</label><br>
    <input id="DS" type="radio" name="console" value="DS" />
    <label class="console DS" for="DS">DS</label><br>
  </div>

  <!-- SNES对应赛道容器 -->
  <div class="course-group course-group-snes" style="display: none;">
    <input id="SNES Bowser Castle 3" type="radio" name="course" value="Bowser Castle 3" />
    <label class="course SNES-Bowser-Castle-3" for="SNES Bowser Castle 3">Bowser Castle 3</label><br>
    <input id="SNES Donut Plains 3" type="radio" name="course" value="Donut Plains 3" />
    <label class="course SNES-Donut-Plains-3" for="SNES Donut Plains 3">Donut Plains 3</label><br>
  </div>

  <!-- N64对应赛道容器（示例） -->
  <div class="course-group course-group-n64" style="display: none;">
    <input id="N64 Rainbow Road" type="radio" name="course" value="Rainbow Road" />
    <label class="course N64-Rainbow-Road" for="N64 Rainbow Road">Rainbow Road</label><br>
  </div>

  <!-- 继续添加GBA、GCN、DS的赛道容器即可 -->
</form>

2. 添加基础CSS（可选，优化样式）

如果想让界面更美观，可以加一点样式：

/* 给标签加间距，鼠标移上去变手型 */
.console, .course {
  margin-left: 8px;
  cursor: pointer;
}

/* 赛道容器缩进，和主机选择区分开 */
.course-group {
  margin-top: 12px;
  padding-left: 20px;
}

3. 写JS实现联动逻辑

用最基础的事件监听，逻辑清晰，新手能看懂：

// 获取所有主机单选按钮
const consoleRadios = document.querySelectorAll('input[name="console"]');

// 给每个主机按钮绑定切换事件
consoleRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    // 第一步：先隐藏所有赛道容器
    const allCourseGroups = document.querySelectorAll('.course-group');
    allCourseGroups.forEach(group => {
      group.style.display = 'none';
    });

    // 第二步：如果当前按钮被选中，显示对应主机的赛道容器
    if (this.checked) {
      // 把主机名转成小写，匹配赛道容器的类名
      const targetGroupName = `.course-group-${this.value.toLowerCase()}`;
      const targetGroup = document.querySelector(targetGroupName);
      // 如果找到对应容器，就显示它
      if (targetGroup) {
        targetGroup.style.display = 'block';
      }
    }
  });
});

关键要点

• 赛道容器的类名要和主机的value对应（比如SNES对应course-group-snes），这样JS能精准找到要显示的容器
• 每次切换主机时先隐藏所有赛道，避免多个赛道同时显示
• 代码都是原生HTML/CSS/JS，不需要依赖任何框架，新手可以直接复制使用，还能轻松扩展其他主机的赛道

内容的提问来源于stack exchange，提问作者PsychedelicSeal