Doctor Wayne Doctor Wayne - 4 months ago 9
HTML Question

If/Else Statement Change Image of a Radio Option when it isn't Clicked

So I have this Table with Radio Options and I'm trying to create a If/Else statement that if the radio option isn't checked and another one is then it will change the image to a X Mark (http://i.imgur.com/RcuPIGF.png), if it is checked than it will change to an image of a check mark (http://i.imgur.com/QAUUxYF.jpg).
Here's what I have so far:



var radio1img1 = document.getElementById("radio1img1");
var radio1img2 = document.getElementById("radio1img2");

if (radio1img1.checked){
changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');
} else {
changeImage('img1','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img2.checked){
changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');
} else {
changeImage('img2','http://i.imgur.com/RcuPIGF.png');
}

<table border="1">
<tr>
<td><b>B1</b></td>
<td>
<label>
<input type="radio" name="radio1" id="radio1img1">
<img align="center" name="radio1" class="theimage" id="img1" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
</td>
<td>
<label>
<input type="radio" name="radio1" id="radio1img2">
<img align="center" name="radio1" class="theimage" id="img2" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
</td>
</tr>
</table>




Answer

Your code looks fine, you just have to attach it to an event handler to make sure the code executes when the thing is ticked.

Using an onclick attribute is one of the many ways to do it (but not the best way).

<input onchange="someFuntion();" .. />

Check out this fiddle.