将多个单选按钮链接在一起以打开不同的 URL答案

【问题标题】：Linking Multiple Radio Buttons Together To Open Different URLs将多个单选按钮链接在一起以打开不同的 URL
【发布时间】：2023-02-03 05:55:44
【问题描述】：

我是 HTML/Javascript 的新手，但我正在尝试将一些单选按钮链接在一起以形成一个表单，以便根据结果将它们链接到不同的 URL。例如：

单选 1) 选择：A 和 B

如果选择了 A 链接到 Radio 2

如果选择了 B，则链接到 Radio 3

单选 2) 选择：C D E

或者

单选 3) 从以下选项中选择：F G H I

提交按钮在同一窗口中打开以下 URL 之一：

如果 C 链接到 URL1

如果 D 链接到 URL2

如果 E 链接到 URL3

如果 F 链接到 URL4

如果 G 链接到 URL 5

如果 H 链接到 URL 6

如果我链接到 URL 7

关于解决此问题的最佳方法的任何建议？

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。

标签： javascript html forms radio-button

【解决方案1】：

我想这会对你有帮助！！

<div id="Radio1">
    <label for="html">A</label>
    <input type="radio" value="A" name="radio" onclick="radio2()" id="0">
    <label for="html">B</label>
    <input type="radio" value="B" name="radio" onclick="radio3()" id="1">
</div>
<div id="Radio2">
    <label for="html">C</label>
    <input type="radio" value="C" name="radio" onclick="url()" id="2">
    <label for="html">D</label>
    <input type="radio" value="D" name="radio" onclick="url()" id="3">
    <label for="html">E</label>
    <input type="radio" value="E" name="radio" onclick="url()" id="4">
</div>
<div id="Radio3">
    <label for="html">F</label>
    <input type="radio" value="F" name="radio" onclick="url()" id="5">
    <label for="html">G</label>
    <input type="radio" value="G" name="radio" onclick="url()" id="6">
    <label for="html">H</label>
    <input type="radio" value="H" name="radio" onclick="url()" id="7">
    <label for="html">I</label>
    <input type="radio" value="I" name="radio" onclick="url()" id="8">
</div>
<link rel="stylesheet" href="style.css">

脚本

<script>
    let allUrl=["https://www.w3schools.com/html/","https://www.w3schools.com/css/","https://www.w3schools.com/js/","https://reactjs.org/","https://www.python.org/","https://angular.io/"]
    let radio2=()=>{
        document.getElementById("Radio2").style.display="contents"
        document.getElementById("Radio3").style.display="none"
    }
    let radio3=()=>{
        document.getElementById("Radio3").style.display="contents"
        document.getElementById("Radio2").style.display="none"
    }
    let url=()=>{
        window.open(allUrl[event.target.id])
    }
</script>

CSS

#Radio2{
    display:none;
}
#Radio3{
    display:none;
}

【讨论】：