Image de bouton radio avec Jquery

Question

J'ai créé des boutons radio avec jQuery, et je veux que chaque bouton radio possède sa propre image et son image. Mais maintenant je n'utilise que deux images pour eux universellement.

Le code peut être consulté à jsFiddle.

En ce moment, je viens de

var checkedImgUrl = 'http://b.vimeocdn.com/ps/879/87952_300.jpg', 
    uncheckedImgUrl = 'http://www.mediabistro.com/alltwitter/files/2011/03/twitter_block.gif'; 

Comment puis-je faire de chacun de ces images ont leur propre image unique et cliqués image?

Answer 1

Une façon vous pouvez le faire, est d'ajouter un attribut à votre RadioButton qui détient l'URL de l'image, par exemple:

<input name="version" type="radio" value="ATT" data-imageurl="radioimage1" /> 

puis dans votre code jquery, vous pouvez référencer le imageurl comme ceci:

uncheckedImgUrl = $(this).attr("data-imageurl") + '.jpg'; 

Si vous hébergez vous-même les images, vous pouvez enregistrer la version 'sélectionnée' du fichier comme '-on' à la fin. Comme si:

checkedImgUrl = uncheckedImgUrl + '-on.jpg'; 

Hope this helps

modifier: http://jsfiddle.net/dGWJp/30/

Je viens de faire un petit changement au jsFiddle parce que je suis trop paresseux pour créer des images pour un exemple. Ce jsfiddle change seulement l'image 'vérifiée' en celle personnalisée. Vous devriez avoir assez d'informations maintenant pour développer ceci pour compléter votre requête. Ceci est le seul changement de code je l'ai fait à l'intérieur fonction swapImage:

checkedImgUrl = $(radio).attr("data-imageurl");