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

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，它可以写得更好。

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'));
    });
  }
}