ChippeRock ChippeRock - 4 months ago 10
CSS Question

How to Change a Radio Button's Image When Another Radio Button has been Clicked HTML

So I have this table and I want the radio buttons to change images to a check mark, which they do (sort of, but more on that later), and I want whenever I click one of the radio buttons the other radio buttons change into a picture of a X Mark (http://i.imgur.com/RcuPIGF.png).

Here is my code so far: http://liveweave.com/4poY04.

As you can see no matter which radio button you click the first one always changes to the check mark image. I have tried changing the id of the radio buttons but that only makes the 2nd one always change to the check mark image.

Answer

Your code is ugly. I only updated your work and now it working.

    function changeImage(id, imgName)
  {
    // reset images
  for (var i = document.getElementsByClassName('theimage').length - 1; i >= 0; i--) {
    document.getElementsByClassName('theimage')[i].src = "http://i.imgur.com/DGofFGc.png";
  }
     image = document.getElementById(id);
     image.src = imgName;
  }
table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
}
label > input{ /* HIDE RADIO */
  display:none;
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<form>
<table border="1">
    <tr>
        <td><b>B1</b></td>
        <td>
  	<label>
        <input type="radio" name="radio1" onClick="changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');">
        <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" onClick="changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');">
        <img align="center" name="radio2" class="theimage" id="img2" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png">
	</input>
  	</label>
         </td>
    </tr>
    </table>
</body>
</html>