单选框选择后点击Next按钮实现多页面跳转技术求助

你的现有代码里，Next按钮是固定指向单一页面的链接，要实现选中不同单选框后点击Next跳转到对应页面，我们可以通过JavaScript来动态处理跳转逻辑，下面是具体的实现步骤：

步骤1：调整HTML结构 #

首先，我们给Next按钮添加一个唯一ID方便JavaScript获取，同时去掉原来<a>标签的固定href（避免默认跳转）；另外给每个单选框加上value属性存储对应跳转页面的URL，这样后期维护更灵活：

<form class="q2" action="">
  <div class="form-group radios">
    <label for="1">
      <input type="radio" name="physio" id="1" value="mark-target.html"><span class="checkmark"></span> Mark
    </label>
  </div>
  <div class="form-group radios">
    <label for="2">
      <input type="radio" name="physio" id="2" value="john-target.html"><span class="checkmark"></span> John
    </label>
  </div>
  <div class="form-group radios">
    <label for="3">
      <input type="radio" name="physio" id="3" value="jack-target.html"><span class="checkmark"></span> Jack
    </label>
  </div>
</form>
<!-- 修改后的Next按钮 -->
<a href="javascript:void(0)" id="nextBtn">
  <div class="button-icon next cta src">
    <p> Next </p>
  </div>
</a>

步骤2：添加JavaScript逻辑 #

接下来编写JS代码，监听Next按钮的点击事件，根据选中的单选框动态跳转：

// 获取Next按钮元素
const nextBtn = document.getElementById('nextBtn');

// 给按钮绑定点击事件
nextBtn.addEventListener('click', function() {
  // 获取当前选中的单选框
  const selectedOption = document.querySelector('input[name="physio"]:checked');
  
  // 检查是否有选中的选项
  if (selectedOption) {
    // 跳转到选中选项对应的页面
    window.location.href = selectedOption.value;
  } else {
    // 如果没有选中任何选项，提示用户
    alert('请先选择一个选项再点击Next哦！');
  }
});

可选：通过单选框ID判断跳转 #

如果你不想用value属性，也可以通过单选框的id来做判断，用switch语句实现：

nextBtn.addEventListener('click', function() {
  const selectedOption = document.querySelector('input[name="physio"]:checked');
  
  if (selectedOption) {
    switch(selectedOption.id) {
      case '1':
        window.location.href = 'mark-target.html';
        break;
      case '2':
        window.location.href = 'john-target.html';
        break;
      case '3':
        window.location.href = 'jack-target.html';
        break;
      default:
        alert('未知选项，请检查！');
    }
  } else {
    alert('请先选择一个选项再点击Next哦！');
  }
});

两种方式都能实现需求，你可以根据自己的维护习惯选择~

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