jQuery Plugin - Image Radio buttons

May 1, 2012 • 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

May 1, 2012 • 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!

May 1, 2012 • 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.

Sep 16, 2012 • 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?

Oct 18, 2012 • Bruno

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

Oct 18, 2012 • dcodernz

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

Dec 13, 2012 • gs

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

Dec 13, 2012 • 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.

Feb 13, 2013 • 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!

Feb 13, 2013 • 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.

Feb 13, 2013 • 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!

Jun 4, 2013 • 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

Jun 4, 2013 • 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);

Jun 4, 2013 • dcodernz

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

Oct 24, 2013 • 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?

Oct 25, 2013 • 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?

Nov 19, 2013 • 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.

Nov 22, 2013 • 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.

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

[...] SourceDemo [...]