title: Change image on radio button click using JS or HTML
body: <p>I have a few radio buttons replaced with images. I have a second set of images I'd like the original ones to change to when a certain button is selected.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;label class="item"&gt;
      &lt;input type="radio" value="10" name="size" required="required"/&gt;
      &lt;img src="./images/10.png"/&gt;
  &lt;/label&gt;
  ...
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>label.item &gt; input {
      visibility: hidden;
      position: absolute;
  }
  </code></pre>
  
  <p>In this case, the image is <code>10.png</code>. I'd like it to change to <code>10S.png</code> when selected, but revert back to <code>10.png</code> when another option is selected.</p>
  
  <p>My best idea was to use JS to append an <code>S</code> to the end of the image path onclick, but reverting back proved troublesome. Is there a strictly HTML/CSS way to do it, or is JS a must? All images used for the radio buttons are in the form <code>#.png</code> from 1-10, and the updated images are <code>#S.png</code> from 1-10 (ie. 2.png will become 2S.png, etc).</p>
  
  <p>I'd rather not use JQuery if possible and I'm hoping for a solution with the most browser compatibility.</p>