选择单选按钮后重定向到特定页面答案

【问题标题】：Redirecting to specific pages after radio button is selected选择单选按钮后重定向到特定页面
【发布时间】：2019-05-03 14:17:17
【问题描述】：

我想重定向到包含 Javascript 中两个独立的基本数学函数的两个页面之一。页面应链接到给定的两个单选按钮之一，并在用户单击“确定”按钮时重定向。

function myFunction() {
  var x = document.getElementById("x");
  var y = document.getElementById("y")

  if (x.checked = true); {
    //* redirect link when Okay button is click 
  } else(y.checked = true); {
    //* redirect link when Okay button is clicked
  }
}

<!DOCTYPE html>
<html>

<body>

  <p>What would you like to convert?</p>

  <form action="/action_page.php">
    <input type="radio" name="converter" value="grams" id="x">Grams to ounces
    <br>
    <input type="radio" name="converter" value="ounces" id="y">Ounces to grams
    <br>
    <br>
    <input type="button" onclick="myFunction()" value="Okay!">
    <br>
  </form>


</body>

</html>

【问题讨论】：

标签： javascript html redirect

【解决方案1】：

你应该使用一个选择框，这对你来说会更容易

<select id="myChoice">
  <option value="grams">grams</option>
  <option value="ounces">ounces</option>
</select>

在你的 JS 中

function myFunction() {
    var theChoice = document.getElementById("myChoice")

    switch (theChoice.value){
      case 'grams':
         //redirect;
         break;
      case 'ounces':
         //redirect
         break;
}

【讨论】：

感谢您的反馈！对初学者有如此巨大的帮助！

【解决方案2】：

很简单，创建一个a类型的元素，放上属性，模拟一个click()重定向

这是钢笔示例： https://codepen.io/lucassoomago/pen/YbKwJx

以下示例不重定向，因为堆栈溢出不允许，如果您想查看重定向，请使用上面的链接

      function myFunction() {
        var x = document.getElementById("x");
        var y = document.getElementById("y")

        var a = document.createElement("a");

        if (x.checked == true)
        {
          a.setAttribute('href', 'https://www.google.com');
          a.setAttribute('target', 'blank');
        }else if (y.checked == true)
        {
          a.setAttribute('href', 'https://www.youtube.com');
          a.setAttribute('target', 'blank');
        }
      
        a.click()
      }

     <p>What would you like to convert?</p>

    <form action="/action_page.php">
       <input type="radio" name="converter" value="grams" id="x">Grams to 
        ounces<br>
       <input type="radio" name="converter" value="ounces" id="y">Ounces to 
        grams<br>
       <br>
       <input type="button" onclick="myFunction()" value="Okay!">
       <br>
       </form>

【讨论】：

【解决方案3】：

以下将检查复选框是否被勾选，然后将您重定向到您定义的网址。我使用了else if，因为如果您的示例中没有选中任何复选框，else 会将您重定向到位置 y。

<form action="/action_page.php">
    <input type="radio" name="converter" value="grams" id="x">Grams to
    ounces<br>
    <input type="radio" name="converter" value="ounces" id="y">Ounces to
    grams<br>
    <br>
    <input type="button" onclick="myFunction()" value="Okay!">
    <br>
</form>

<script>
  function myFunction() {
  var x = document.getElementById("x");
  var y = document.getElementById("y")

  if (x.checked)
  {
     window.location.replace("url");
  }
  else if (y.checked)
  {
     window.location.replace("url");
  }
  }
  </script>

【讨论】：