根据选择的单选按钮更改按钮链接

Question

我有5个单选按钮，根据要选择的哪个按钮，我想更改图像的href链接，从而将您发送到另一个页面。 示例：我选择了第一个单选按钮。 当我单击图像时，将打开“画廊”页面。 当我选择第二个单选按钮并按下图像时，它将打开“关于我”页面...使用JavaScript对此有什么解决方案吗？

这是我的收音机：

<input checked="" type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<input type="radio" name="slider" id="slide6">

这是按钮：

<div id="down_icon2">
    <a href="">
        <img src="images/down_icon.png">
    </a>
</div>

Answer 1

创建一个功能来检查设置了哪个单选按钮，该功能设置了所需的链接。

 <input checked="" type="radio" name="slider" id="slide1"> <input type="radio" name="slider" id="slide2" > <input type="radio" name="slider" id="slide3"> <input type="radio" name="slider" id="slide4"> <input type="radio" name="slider" id="slide5"> <input type="radio" name="slider" id="slide6"> <a href="" onclick='myFunction()' id="myLink">MyLink</a> <script> function myFunction() { if(document.getElementById('slide1').checked) { document.getElementById('myLink').href = "test.php"; } } </script> 

您可以对图像src执行相同的操作

编辑：这是第一个单选按钮的情况，您必须为其他按钮添加测试。

Answer 2

<input type="radio" data-image="http://www.placecage.com/200/300" name="slider" id="slide1">

将数据图像添加到具有所需图像的所有幻灯片中。 然后使用Jquery，您可以执行以下操作：

$("input").click(function () {
  var clickedRadio = $(this).attr("data-image");
  $("img").attr("src", clickedRadio);
})

如果单击任何输入，它将图像的src设置为单击项的数据图像；）注意，这使用了Jquery库

这也是一个工作示例codepen

Answer 3

答案就是这样，它只使用本机javascript。如果您使用jQuery之类的额外lib，它可以写得更好。

https://jsfiddle.net/mham9ons/

只需使用您的html：

<input type="radio" name="slider" id="slide2" data-href="xxx1">
<input type="radio" name="slider" id="slide3" data-href="xxx2">
<input type="radio" name="slider" id="slide4" data-href="xxx3">
<input type="radio" name="slider" id="slide5" data-href="xxx4">
<input type="radio" name="slider" id="slide6" data-href="xxx5">

<div id="down_icon2"><a href=""><img src="images/down_icon.png"></a></div>

添加以下代码：

var sliders = document.getElementsByName('slider');
var linkWrapper = document.getElementById('down_icon2');

for (var i in sliders){
    if(sliders[i].addEventListener){
    sliders[i].addEventListener('click', function(){
       linkWrapper.childNodes[0].setAttribute('href', this.getAttribute('data-href'));
    });
  }
}