技术问询：如何实现基于单选框选择的点击跳转功能

嘿，我来帮你搞定这个需求！首先得提个关键的小问题：你当前代码里的每个单选框name属性都不一样（比如第一个是EmergencyOptionradio，第二个是Non-EmergencyOptionradio），这样它们没法成为一组互斥的单选选项——用户能同时选中多个。所以第一步要把所有单选框的name改成同一个值，比如serviceType，这样才能保证每次只能选一个选项。

下面给你两种实用的实现方式：

方法一：纯HTML快速实现（适合简单场景） #

直接给每个单选框绑定onclick事件，选中时立即跳转。这种方式不用额外写JS代码块，简单直接：

<form>
  <div class="radio">
    <label>
      <input type="radio" id="EmergencyOption" name="serviceType" value="1" onclick="window.location.href='emergency.html'">
      Emergency
    </label>
  </div>
  <br>
  <div class="radio">
    <label>
      <input type="radio" id="Non-EmergencyOption" name="serviceType" value="2" onclick="window.location.href='non-emergency.html'">
      Non-Emergency
    </label>
  </div>
  <br>
  <!-- 剩下4个选项按照同样的格式添加，替换对应的id、value和跳转地址 -->
</form>

方法二：JavaScript优雅实现（适合复杂/可维护场景） #

如果你的选项较多，或者后续需要频繁修改跳转地址，推荐用这种把逻辑和结构分离的方式：

第一步：调整HTML结构（统一name，可选加容器id） #

<form id="serviceForm">
  <div class="radio">
    <label>
      <input type="radio" id="EmergencyOption" name="serviceType" value="1">
      Emergency
    </label>
  </div>
  <br>
  <div class="radio">
    <label>
      <input type="radio" id="Non-EmergencyOption" name="serviceType" value="2">
      Non-Emergency
    </label>
  </div>
  <br>
  <div class="radio">
    <label>
      <input type="radio" id="VaccinationOption" name="serviceType" value="3">
      Vaccination
    </label>
  </div>
  <!-- 补充剩下3个选项 -->
</form>

第二步：添加JavaScript逻辑 #

// 定义选项value和对应跳转地址的映射表，后续修改直接改这里就行
const routeMap = {
  '1': 'emergency.html',
  '2': 'non-emergency.html',
  '3': 'vaccination.html',
  // 把剩下3个选项的value和跳转地址补充进来
};

// 获取所有同组的单选框
const radioButtons = document.querySelectorAll('input[name="serviceType"]');

// 给每个单选框绑定change事件（比click更准确，支持键盘选中）
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 确认当前单选框是选中状态才执行跳转
    if (this.checked) {
      const targetUrl = routeMap[this.value];
      if (targetUrl) {
        // 可选：添加确认弹窗，防止误操作
        // if (confirm('确定要跳转到对应页面吗？')) {
        //   window.location.href = targetUrl;
        // }
        window.location.href = targetUrl;
      }
    }
  });
});

额外提示 #

• 跳转地址可以是相对路径（比如上面的emergency.html）、绝对路径（比如/services/emergency）或者完整URL（比如https://yourdomain.com/emergency），根据你的项目需求调整。
• 如果需要在跳转前做一些额外处理（比如收集用户其他信息、埋点统计），都可以在change事件的处理函数里添加对应的逻辑。

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