jQuery Plugin - Image Radio buttons

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

    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

    4/30/2012, 6:36:56 PM

  • Scott

    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!

    4/30/2012, 6:40:12 PM

  • dcodernz

    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.

    4/30/2012, 9:19:28 PM

  • dcodernz

    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?

    9/16/2012, 2:21:12 AM

  • Bruno

    Value=Metallica, kreator, slayer :D Good selection, but thanks for this, this is that i searched for.

    10/18/2012, 4:31:31 AM

  • dcodernz

    You're welcome. It's good to see stuff being used that I produce. :-)

    10/18/2012, 8:26:21 AM

  • gs

    hi, how can you select a radio using another button? Thanks

    12/12/2012, 5:59:48 PM

  • dcodernz

    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.

    12/13/2012, 6:45:19 AM

  • Brett Mitchell

    Great work dcodernz! 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!

    2/13/2013, 2:06:24 AM

  • dcodernz

    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.

    2/13/2013, 9:31:02 AM

  • Brett Mitchell

    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!

    2/13/2013, 10:21:54 AM

  • Axel

    Hi dcodernz, 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

    6/3/2013, 10:57:59 PM

  • dcodernz

    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);

    6/4/2013, 12:45:51 AM

  • dcodernz

    Oh, and you need to re-initialize the group but that won't work... Sorry, this is not an easy fix.

    6/4/2013, 12:48:16 AM

  • Lewis

    Hi there, I'm trying to use several sets of radio buttons on the same page, for example GROUP 1 - Button 1 - Button 2 - Button 3 GROUP 2 - Button 1 - Button 2 - Button 3 But, for some reason there is confliction in the sense that if I select any button in GROUP 1, and then select a button in GROUP 2, it deselects my option in GROUP 1. I've made sure the 'name' tag for each section is the same (as it would be normally in standard radio buttons), but still doesn't work. Any ideas?

    10/23/2013, 5:53:38 PM

  • Christopher

    This script works very fine. I love it cause you can set different images for each bullet. What do I have to change to have this with checkboxes? So that the image won't change when I click on an other image but it change when i click another one?

    10/24/2013, 12:17:26 PM

  • dcodernz

    Hi Lewis, Thanks for your comment. Sorry for the late reply, but I was pretty busy. Could you maybe provide an example, for example on js fiddle or so, so I can debug your example? http://jsfiddle.net/TA6JQ/ There may be a bug in this plugin that you have discovered, but maybe it's just something else that went wrong.

    11/19/2013, 12:07:11 AM

  • dcodernz

    The plugin would need to be extended to cater for that functionality. At the moment only radio buttons are supported. However, if there is demand I can probably do this.

    11/21/2013, 8:39:41 PM

  • 15+ jQuery Radio Button & Checkbox Style Plugins | jQuery4U | No.1 Resource for jQuery Developers

    [...] SourceDemo [...]

    4/23/2014, 4:42:23 AM