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

Change button link depending on which radio button is selected

本文关键字：按钮 链接 单选按钮 选择      更新时间：2023-09-26

我有 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>

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

<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 执行相同的操作

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

<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 库

这里也是一个工作示例代码笔

这就是答案，它只是使用本机 javascript.it 如果你使用像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'));
    });
  }
}
相关文章：