Question

我有一组三个单选按钮连接一组三个图像 - 即{image1，radioBtn1}，{image2，radioBtn2}，{image3，radioBtn3}。

我正在尝试执行以下操作：当我单击一个图像时，连接到此按钮的单选按钮会自动变为“已选中”（例如：当我单击图像3时，将检查radioBtn3）

我尝试过以下代码：

HTML：

<input type="radio" id="radioBtb1" name="subject"/><a href="#"><img id="image1" src="../image/img3.png" height="150px"/></a>
<input type="radio" id="radioBtb2" name="subject"/><a href="#"><img id="image2" src="../image/img3.png" height="150px"/></a>
<input type="radio" id="radioBtb3" name="subject"/><a href="#"><img id="image3" src="../image/img3.png" height="150px"/></a>

使用Javascript：

function selectSubject(){
    if(document.getElementById('image1'))
        document.getElementById(radioBtb1).checked=true;
    if(document.getElementById('personal'))
        document.getElementById(radioBtb2).checked=true;
    if(document.getElementById('image3'))
        document.getElementById(radioBtb3).checked=true;
}

但这根本不起作用。

Answer 1

您可以使用<label>标记轻松完成此操作。只需使用以下语法：

<label>
    <input type="radio" id="radioBtb1" name="subject"/>
    <img id="image1" src="../image/img3.png" height="150px"/>
</label>
<label>
    <input type="radio" id="radioBtb2" name="subject"/>
    <img id="image2" src="../image/img3.png" height="150px"/>
</label>
<label>
    <input type="radio" id="radioBtb3" name="subject"/>
    <img id="image3" src="../image/img3.png" height="150px"/>
</label>

这将自动完成您正在寻找的目标。

Answer 2

如果你仍然想用javascript做，你可以这样做。我做到了，所以你可以看到发生的一切。

检查this working fiddle

window.onload = function () {

    var image1 = document.getElementById('image1');
    var image2 = document.getElementById('image2');
    var image3 = document.getElementById('image3');

    image1.addEventListener('click',runmewhenclicked);
    image2.addEventListener('click',runmewhenclicked);
    image3.addEventListener('click',runmewhenclicked);  

};  

function runmewhenclicked() {   

    var id = this.id;

    if(id == "image1")
    {
       document.getElementById("radioBtb1").checked = true;
    }
    else if(id == "image2")
    {
       document.getElementById("radioBtb2").checked = true;
    }
    else if(id == "image3")
    {
       document.getElementById("radioBtb3").checked = true;
    }
};

“Javascript”中的单选按钮设置

2 个答案: