“Javascript”中的单选按钮集

Question

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

我正在尝试执行以下操作：当我点击一张图片时，连接到该按钮的单选按钮自动变为“选中”（例如：当我点击 image3 时，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;
    }
};