javascript - 用于根据选择创建 URL 的单选按钮

Question

我有 3 个带有选择按钮的单选按钮 - 现在我需要将选择按钮更改为选择单选按钮。例如html代码:

 <INPUT TYPE="radio" id="Orange"> Orange
 <INPUT TYPE="radio" id="Apple""> Apple
 <INPUT TYPE="radio" id="Mango"> Mango
 <button>Select</button>

我现在想链接我的“选择”按钮来获取 URL我想我必须将这个 URL 放置在 html 中的某种数组中，或者从数据库中读取。

任何有关如何链接按钮以及如何嵌入 URL 的建议将不胜感激。

预先感谢您的阅读和评论。

Answer 1

您可以将 url 链接作为单选按钮的值传递。然后点击按钮获取选中的单选按钮的值。

HTML

 <INPUT TYPE="radio" id="Orange" name="myRadio" value="www.google.com"> Orange
 <INPUT TYPE="radio" id="Apple" name="myRadio" value="www.mozilla.com"> Apple
 <INPUT TYPE="radio" id="Mango" name="myRadio" value="www.microsoft.com"> Mango
 <button onclick="navigateSite()">Select</button> //trigger navigateSite function

JS

function navigateSite(){
var getUrl = document.querySelector('input[name = "myRadio"]:checked').value
  console.log(getUrl);
  // location.href = getUrl // If you want to navigate to the site
}

EXAMPLE