如何用JS根据单选按钮值更新表单重定向URL？

嘿，我来帮你搞定这个需求！要实现根据选中的单选按钮值，让表单提交后跳转到不同的URL，用JavaScript就能轻松实现。我给你两种常用的方案，你可以根据自己的场景选择：

方案1：实时更新表单Action属性 #

这种方式会在用户切换单选按钮时，立刻修改表单的action属性，提交时直接跳转到对应地址，逻辑直观易懂。

完整代码示例 #

<form id="myForm" method="GET" action="https://mywebsite.com/page-a">
  <label class="labl">
    <input type="radio" name="quantite" value="1" checked="checked"/>
    <div>
      <span class="box"><b>First choice</b></span><br>
    </div>
  </label>
  <label class="labl">
    <input type="radio" name="quantite" value="2"/>
    <div>
      <span class="box"><b>Second choice</b></span><br>
    </div>
  </label>
  <button type="submit">Submit</button>
</form>

<script>
// 获取所有目标单选按钮
const radioButtons = document.querySelectorAll('input[name="quantite"]');
// 获取表单元素
const form = document.getElementById('myForm');

// 给每个单选按钮绑定切换事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 根据选中值更新表单action
    if (this.value === '1') {
      form.action = 'https://mywebsite.com/page-a';
    } else if (this.value === '2') {
      form.action = 'https://mywebsite.com/page-b';
    }
    // 后续如果有更多选项，直接在这里加else if分支即可
  });
});
</script>

方案2：表单提交时再处理跳转 #

这种方式会在用户点击提交按钮后，先阻止默认提交行为，判断选中的单选按钮值后再跳转（或修改action后提交），适合不想提前修改表单属性的场景。

完整代码示例 #

<form id="myForm" method="GET">
  <label class="labl">
    <input type="radio" name="quantite" value="1" checked="checked"/>
    <div>
      <span class="box"><b>First choice</b></span><br>
    </div>
  </label>
  <label class="labl">
    <input type="radio" name="quantite" value="2"/>
    <div>
      <span class="box"><b>Second choice</b></span><br>
    </div>
  </label>
  <button type="submit">Submit</button>
</form>

<script>
const form = document.getElementById('myForm');

form.addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取当前选中的单选按钮
  const selectedRadio = document.querySelector('input[name="quantite"]:checked');
  
  // 方式A：直接跳转（适合不需要传递表单数据的场景）
  if (selectedRadio.value === '1') {
    window.location.href = 'https://mywebsite.com/page-a';
  } else if (selectedRadio.value === '2') {
    window.location.href = 'https://mywebsite.com/page-b';
  }

  // 方式B：修改action后提交（适合需要传递表单数据的场景，把上面的方式A注释掉，打开下面的代码）
  // if (selectedRadio.value === '1') {
  //   this.action = 'https://mywebsite.com/page-a';
  // } else {
  //   this.action = 'https://mywebsite.com/page-b';
  // }
  // this.submit();
});
</script>

小提示 #

• 确保表单和单选按钮的选择器正确，这样JS才能准确获取到元素；
• 如果后续需要添加更多单选按钮选项，只需要在判断逻辑里新增对应的else if分支即可；
• 不管是GET还是POST请求，两种方案都能适用，只要保证目标URL支持对应的请求方法就行。

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