选择导航到 URL 上的单选按钮答案

【问题标题】：Radio button on select navigation to URL选择导航到 URL 上的单选按钮
【发布时间】：2013-04-09 05:57:08
【问题描述】：

我是 java 脚本的新手，正在尝试实现以下目标并正在寻找建议：

创建两个单选按钮，当我们选择单选按钮时，它应该导航到一些 URL，如下例 XYZ.com 或 ABC.com

<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" value="http://xyz.com"     name="userChoice" id="navRadio01">
 <label for="navRadio01">XYZ</label><br> 
<input type="RADIO" value="http://abc.com"    name="userChoice" id="navRadio02" checked>
        <label for="navRadio02">ABC</label><br>  
<input type="BUTTON"  value="Go"    onclick="ob=this.form.userChoice;for(i=0;i<ob.length;i++){
    if(ob[i].checked){window.open(ob[i].value,'_self');};}" style="color:#FFFFF;background-color:#E0E0E5;font-family:verdana;border-style:solid;" />
</fieldset>
</form>
</html>

我在上面的示例中使用了“开始”按钮，如果不使用“开始”按钮并且一旦选择导航到该链接，我们如何才能做到这一点。？

请指教。

提前谢谢大家。

- V

【问题讨论】：

为什么要使用单选按钮而不是锚标签，后者在语义上更正确？

标签： javascript html

【解决方案1】：

看看这里：

Calling onclick on a radiobutton list using javascript

有一些争论，然后是底部的完整示例。

【讨论】：

【解决方案2】：

您可以使用单选按钮的“onclick”事件处理程序来完成，如下所示：

<input type="RADIO" value="http://abc.com" onclick="window.open(this.value)" name="userChoice" id="navRadio02" checked>

请注意，正如您问题的 cmets 中所述，锚标记更适合执行此操作。

【讨论】：

【解决方案3】：

您可以将单选按钮的引用传递给由单选按钮的 onclick 事件触发的函数。然后在函数中，打开由单选按钮的值指定的链接。

例如，函数openLink 根据单选按钮的值打开一个链接。

<script>
function openLink(radio){
 window.open(radio.value,'_self');
}
</script>

然后在 HTML 页面的正文中，在单击单选按钮时传递对单选按钮的引用，以实现 openLink 函数：

<fieldset>
<input type="radio" id="fname"  value="http://www.abc.com" name="name1" onclick="openLink(this)">

<input type="radio" value="http://www.xyz.com" id="fname2" name="name1" onclick="openLink(this)">
</fieldset>

【讨论】：

【解决方案4】：

试试这个例子：

<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" name="userChoice" id="navRadio01" onclick="window.location='http://google.com'">
<input type="RADIO" name="userChoice" id="navRadio02"  onclick="window.location='http://yahoo.com.com'">
</fieldset>
</form>
</html>

希望对你有帮助...

【讨论】：

这是正确答案；它使用当前窗口导航到新 url，其他实现在新窗口/选项卡中打开 url。

【解决方案5】：

<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" name="userChoice" id="navRadio01" onclick="window.location='http://google.com'">
<input type="RADIO" name="userChoice" id="navRadio02"  onclick="window.location='http://yahoo.com.com'">
</fieldset>
</form>
</html>

【讨论】：