title: onclick/onchange event for radio button deselect
body: <p>I was wondering if anyone knew how to solve an issue I've been raking my brain over all day, and get some fresh thinking into it. The situation is as follows, I need to make a form with mostly radio button style questions, styled as image buttons. The part at which I'm stuck on is trying to get the image to revert back after the radio button is de-selected, either through the onclick or onchange event.</p>
  
  <p>Is there any workaround or method of getting an event to fire after a radio button is de-selected? Any input to solve this problem would be welcome. An example question goes as follows:</p>
  
  <pre><code>&lt;input type="radio" id="switch" onclick="changeImage()" name="radiogroup" style="visibility: hidden;"&gt;
  &lt;img id="Image1" src="normal.png" onclick="changeImage()"&gt;
  
  
  &lt;script&gt;
    function changeImage() {
        var image = document.getElementById('Image1');
        if (image.src.match("normalb")) {
            image.src = "normal.png";
            var x = document.getElementById("switch");
        x.checked = false;
        } else {
            image.src = "normalb.png";
            var x = document.getElementById("switch");
        x.checked = true;
        }
    }
  &lt;/script&gt;
  
  &lt;input type="radio" id="switch2" onclick="changeImage2()" name="radiogroup" style="visibility: hidden;"&gt;
  &lt;img id="Image2" src="dry.png" onclick="changeImage2()"&gt;
  
  
  &lt;script&gt;
    function changeImage2() {
        var image = document.getElementById('Image2');
        if (image.src.match("dryb")) {
            image.src = "dry.png";
            var x = document.getElementById("switch2");
        x.checked = false;
        } else {
            image.src = "dryb.png";
            var x = document.getElementById("switch2");
        x.checked = true;
        }
    }
  &lt;/script&gt;
  </code></pre>