JQuery Custom Radio Buttons code (code not working)
<p>usual but I need to have different custom radio button images per button.</p>

<p>So Radio1 would have different images to Radio2.</p>

<p>Trying it out on the code below but it won't work so I must be doing something wrong?</p>

<p>Here's the code:</p>

<pre><code>&lt;label for="radio1"&gt;
    &lt;img src="radio1_unchecked.png" style="vertical-align:middle" /&gt;
    &lt;input name="radiogroup" type="radio" id="radio1" style="display:none;"&gt;
&lt;/label&gt;

&lt;label for="radio2"&gt;
    &lt;img src="radio2_unchecked.png" style="vertical-align:middle" /&gt;
    &lt;input name="radiogroup" type="radio" id="radio2" style="display:none;"&gt;
&lt;/label&gt;

&lt;script&gt;
 $(document).ready(function(){

var radio1checkedImage = "radio1_checked.png",
    radio1uncheckedImage = "radio1_unchecked.png",
    radio2checkedImage = "radio2_checked.png",
    radio2uncheckedImage = "radio2_unchecked.png";

   $('img').attr("src", radio1uncheckedImage);

$('#radio1, #radio2').change(function() {
  var r;

  r = $("#radio1");
  r.prev().attr("src", r[0].checked ? radio1checkedImage : radio1uncheckedImage);

  r = $("#radio2");
  r.prev().attr("src", r[0].checked ? radio2checkedImage : radio2uncheckedImage);

});


});

&lt;/script&gt; 
</code></pre>

<p>Update: <a href="http://jsbin.com/ekavin" rel="nofollow">Here</a> is the same code as above but without the multiple images.
As you can see it works. Can't the code be modified to have multiple images per radio?</p>
