“Javascript”中的单选按钮集

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