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.it如果你使用像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'));
    });
  }
}

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

3 个答案: