Набор переключателей в «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; 
    } 
};