At work I’ve written this jQuery plugin. It’s only 2KB big and turns your normal radio buttons into images, you can set any images you like for src, checked and hover. Simply attach the configuration to your html input field as the class attribute as a JavaScript like object. I know you might want to attach a class to your radio buttons, but this is how far it currently is.
Here an example:
Get the JavaScript code
Get the HTML/JavaScript code
Edit: Just found this which seems to make this plugin obsolete. 
Wish I would have found this earlier…
Scott
01/05/2012 at 6:36 am
Your plugin actually works better for what I am doing than the one you posted.
In your script how can I make it so that if one of the images are selected the hover will be ignored?
Thanks
Scott
01/05/2012 at 6:40 am
Actually I answered my own question:
I changed:
$imgRadio.hover(function() {
$(this).attr(‘src’,hov);
}
To:
$imgRadio.hover(function() {
if(!$this.attr(‘checked’)){
$(this).attr(‘src’,hov);
}
}
Thank you for this plugin! Works perfect for me!
admin
01/05/2012 at 9:19 am
Thanks! When I have a bit more time, I will revise the plugin as it has a few bugs. I might also put it on GitHub. Will let people know here.
Tim
16/09/2012 at 2:21 pm
Please review the plugin. I have (hopefully) improved it by fixing the problem where when you have a radio button selected and you hover it changed the image to the hover image but didn’t change it back when the mouse exists. Now it should not change when you hover, which is what I would expect. I guess this could be made a setting. What do you think?
Bruno
18/10/2012 at 5:31 pm
Value=Metallica, kreator, slayer
Good selection, but thanks for this, this is that i searched for.
Tim
18/10/2012 at 9:26 pm
You’re welcome. It’s good to see stuff being used that I produce.
gs
13/12/2012 at 6:59 am
hi, how can you select a radio using another button? Thanks
Tim
13/12/2012 at 7:45 pm
Not sure what you mean. This is what the plugin does, you can replace radio buttons with your own and you should be able to see how from the example.
Brett Mitchell
13/02/2013 at 3:06 pm
Great work Tim! I appreciate it very much. I am incorporate this into a phone selection website. I would like to attach the onclick event to the radio buttons to redirect to another page. However I am having trouble getting this to work. I tried to attach the ‘change ‘ and ‘click’ event using JQuerys live property but it doesn’t seem to be working. Any help would be appreciated. Thanks!
Tim
13/02/2013 at 10:31 pm
You might need to change the plugin for that, because I haven’t made it dispatch events yet. However, if you have some patience, I will have a look when I have half an hour or more to do so.
Brett Mitchell
13/02/2013 at 11:21 pm
Thanks for the quick response. I’ve got plenty of time! I’ll keep a look out for an update when you get a chance. Thanks!
Axel
04/06/2013 at 10:57 am
Hi Tim,
your work is good, but for me a little bit difficult to understand all. I have a Radio button and a Text in a label beside all inside a table.
It is possible to change the pics by click on the row of the table anyway?
With:
$(‘.classRow’).click(function() {
$(this).find(‘input[type=radio]‘).prop(‘checked’, true);
}
can i change the value of radio, but what can I do to change the pic at this place?
Is there an easy way for this problem?
Thanks
Tim
04/06/2013 at 12:45 pm
Hi Axel,
As far as I understand, you want to change the image when something else is clicked on.
You can achieve this by changing the image AND the radio buttons’ data so that it still behaves correctly.
This however, is reasonably complicated and should maybe be part of the library.
For the mean time you could try doing something like:
var $el = $(‘#heuer4′); // selector for your radio button
eval(‘var json = ‘+ $el.attr(‘class’) +’;');
json.src = ‘accept.png’;
$el.attr(‘class’,JSON.stringify(json));
$img=$el.prev();
$img.attr(‘src’,json.src);
Tim
04/06/2013 at 12:48 pm
Oh, and you need to re-initialize the group but that won’t work…
Sorry, this is not an easy fix.