title: Change the image of a label from radio input
body: <p>I'm trying to change the label images by input of a radio button with JavaScript or CSS.</p>
  
  <p>I've tried <code>"input[type="radio"]:not(:checked) + label"</code> within CSS and
  also tried to change it by JavaScript.</p>
  
  <p>What I currently have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var service1 = document.getElementById('service1');
  var service2 = document.getElementById('service2');
  var service3 = document.getElementById('service3');
  
  if(service1 == document.getElementById('service1').checked){
   document.getElementById('service2').src = "decent_rate_unchecked.png";
   document.getElementById('service3').src = "good_rate_unchecked.png";
  }else if(service2 == document.getElementById('service2').checked){
   document.getElementById('service1').src = "bad_rate_unchecked.png";
   document.getElementById('service3').src = "good_rate_unchecked.png";
  }else{
   document.getElementById('service2').src = "bad_rate_unchecked.png";
   document.getElementById('service3').src = "decent_rate_unchecked.png";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#service1 input[type="radio"]:not(:checked) + label{
   border: 5px solid black;
   border-radius: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="Sources/form.php" method="post" id="container"&gt;
  &lt;label id="service"&gt;
  &lt;input type="radio" checked="checked" id="service1" name="service" value="1" required="required"/&gt;
  &lt;label for="service1"&gt;
  &lt;img src="http://lorempixel.com/50/50/technics/1/" style="width:42px;height:42px;" for="service1" title="bad"/&gt;
  &lt;/label&gt;
  &lt;input type="radio" id="service2" name="service" value="5,5" required="required"/&gt;
  &lt;label for="service2"&gt;
  &lt;img src="http://lorempixel.com/50/50/technics/1/" style="width:42px;height:42px;" for="service2" title="decent"/&gt;
  &lt;/label&gt;
  &lt;input type="radio" id="service3" name="service" value="10" required="required"/&gt;
  &lt;label for="service3"&gt;
  &lt;img src="http://lorempixel.com/50/50/technics/1/" style="width:42px;height:42px;" for="service3" title="good"/&gt;
  &lt;/label&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Expected result would be that the images change into the pre-made "unchecked" states of the images, actual results is that nothing happens except for the fact that it gets a black round border if it's selected</p>