javascript - 如何设置基于 2 个单独的单选按钮打开提交按钮上的特定链接

Question

这是我写的代码

<form>
    <input type="radio" name="cand" value="fr" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');"> Fresher<br><br>
    <input type="radio" name="cand" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');"> Experienced<br><br>
    <input type="button" onclick="location.href='http://google.com';" value="Next" />
</form>

如果假设用户选择选项 1(例如:新生)，则链接 1(新生表格链接)应该打开。或者如果选择选项 2，即有经验，则应打开有经验的链接。

请提供答案并解释，我是 HTML 和 JavaScript 新手。

Answer 1

您需要脚本来更新 location.href' 。在选择单选按钮时触发函数并使用setAttribute`方法更新onclick属性

function updateLink(value) {
  if (value === "fr") {
    document.getElementById("next").setAttribute('onclick', "location.href='www.google.com'")

  } else {
    document.getElementById("next").setAttribute('onclick', "location.href='www:wikipedia.com'")

  }

}

<form>
  <input type="radio" name="cand" value="fr" onclick="updateLink(this.value)"> Fresher<br><br>
  <input type="radio" name="cand" value="ex" onclick="updateLink(this.value)"> Experienced<br><br>
  <input id="next" type="button" onclick="location.href='www.google.com';" value="Next" />
</form>

这个演示只是基于您的代码。使用 addEventListener 是比使用内联事件处理程序更好的选择。