title: Using data attributes to change background image of element.
body: <p>I try to change the background image of an element with a jQuery function.
  Got it working with a Select element but get stucked with radio buttons.</p>
  
  <p>Thanks for any help!</p>
  
  <p><strong>Works with a select box</strong> </p>
  
  <pre><code>&lt;div id="imagechange"&gt;&lt;/div&gt;
  
      &lt;select class="logo"&gt;
      &lt;option data-image="url(http://stackoverflow.com/image1)"&gt;image1&lt;/option&gt;
      &lt;option data-image="url(http://stackoverflow.com/image2)"&gt;image2&lt;/option&gt;
      &lt;option data-image="url(http://stackoverflow.com/image3)"&gt;image3&lt;/option&gt;
      &lt;/select&gt;
  
  
      &lt;script&gt;
      $('.logo').on('change', function () {
      $("#logo").css("background-image", ($('option:selected', this).data("image")));
      });
      &lt;/script&gt;  
  </code></pre>
  
  <p><strong>Does not work with radio buttons</strong> </p>
  
  <pre><code>&lt;div id="imagechange"&gt;&lt;/div&gt;
  
  &lt;input name="test" class="swatch" type="radio" data-image="url(http://stackoverflow.com/image1)"&gt;image1&lt;br&gt;
  &lt;input name="test" class="swatch" type="radio" data-image="url(http://stackoverflow.com/image2)"&gt;image2&lt;br&gt;
  &lt;input name="test" class="swatch" type="radio" data-image="url(http://stackoverflow.com/image3)"&gt;image3&lt;br&gt;
  
  
  &lt;script&gt;
  $('.swatch').on('change', function () {
  $("#imagechange").css("background-image", ($('.swatch:checked', this).data("image")));
  });
  &lt;/script&gt;  
  </code></pre>