title: How to change the background image of a label using CSS with JavaScript
body: <p>This one is a real headache. I have three checkboxes in a form that I have labels for, and the labels have background images set with CSS, the question is, how exactly do I get my JavaScript to change the image from current image to a second image when it is clicked and select the checkbox. From what I know of javascript, it should work, any ideas? Also, it does have to be this way due to previous issues with i.e. 7 and 8.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="checkbox" name="interest1" id="interest1" value="interested"style="display:block"&gt;
  &lt;input type="checkbox" name="interest2" id="interest2" value="interested"style="display:block"&gt;
  &lt;input type="checkbox" name="interest3" id="interest3" value="interested"style="display:block"&gt;
  &lt;p align="center"&gt;
  &lt;label for="interest_inet" id="label-interest1" onClick="func()"&gt;&lt;/label&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>label {
      border:1px solid red;
      display:inline-block;
  }
  
  #label-interest1 {
      background-image: url(images/internetbutton.gif);
      width: 152px;
      height:152px;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function func()
  {
      if(document.getElementById('interest_inet').checked)
      {
          document.getElementById('label-interest1').style.backgroundImage=url(images/internetbutton.gif);
      }
      else
      {
          document.getElementById('label-interest1').style.backgroundImage=url(internetbuttonchecked.gif);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a live code <a href="http://jsbin.com/uburan/11/edit" rel="nofollow noreferrer">example</a> </p>