Set of radio buttons in "Javascript"

I have a set of three radio buttons connected with a set of three images - i.e. {image1, radioBtn1}, {image2, radioBtn2}, {image3, radioBtn3}.

I'm trying to do the following: When I click on one image, the radio button connected to this button turn to 'checked' automatically (for example: when I click on image3, radioBtn3 will be checked)

I've tried the following code:

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

But that didn't work at all.

Answers


You can do this really easily using the <label> tag. Just use the following syntax:

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

That will automatically do exactly what you are looking for.


If you still wanna do it with javascript you can do like this. I made it so you coukld see everything that happens.

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

Need Your Help

Many views, one form, different validation

java spring spring-validator

I have a couple of jsp pages, all of each use one form.

MVC5 HTML ActionLink Throws CS1502

asp.net-mvc entity-framework

I've created a very simple view class in my MVC5 solution. It uses the Entity Framework and calls one of the controller class's actions. I want to output a list of VIN numbers as hyperlinks on my...