ChippeRock ChippeRock - 1 year ago 67
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 (

Here is my code so far:

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 Source

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 = "";
     image = document.getElementById(id);
     image.src = imgName;
table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
label > input{ /* HIDE RADIO */
label > input + img{ /* IMAGE STYLES */
<!DOCTYPE html>
<title>HTML5, CSS3 and JavaScript demo</title>
<table border="1">
        <input type="radio" name="radio1" onClick="changeImage('img1','');">
        <img align="center" name="radio1" class="theimage" id="img1" height="40px" width="40px" src="">
        <input type="radio" name="radio1" onClick="changeImage('img2','');">
        <img align="center" name="radio2" class="theimage" id="img2" height="40px" width="40px" src="">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download