Changer les boutons radio image, aide

Question

Hé les gars. Je ne suis pas un programmeur, mais je dois quand même coder.

Maintenant, j'ai un problème avec le changement de l'image du bouton radio avec jQuery. J'ai ce code du web mais ça ne marche toujours pas. Il change les images de bouton radio, mais lorsque je tente de sélectionner, il ne change que l'image de la première boîte de radio (chaque fois)

Voici mon code HTML.

<div id="testcontent"> 
<div class="questions"> 
<div id="question0" class="question"> 
<span class="qutitle">asdg asdg</span> 
<FIELDSET class="radios"> 
<label for="q_0" class="label_radio"> 
<input id="q_0" type="radio" name="q_0" value="2">dgasdg 
</label> 
<label for="q_0" class="label_radio"> 
<input id="q_0" type="radio" name="q_0" value="0"> sdgas 
</label> 
<label for="q_0" class="label_radio"> 
<input id="q_0" type="radio" name="q_0" value="1">dgas 
</label> 
</FIELDSET> 
</div> 

Voici le css. J'espère que j'ai bien compris.

#testcontent .label_check, 
#testcontent .label_radio { padding-left: 34px; } 
#testcontent .label_radio { background: url(radio-off.png) no-repeat; } 
#testcontent .label_check { background: url(check-off.png) no-repeat; } 
#testcontent label.c_on  { background: url(check-on.png) no-repeat; } 
#testcontent label.r_on  { background: url(radio-on.png) no-repeat; } 
#testcontent .label_check input, 
#testcontent .label_radio input { position: absolute; left: -9999px; } 

Et voici le code jquery.

function setupLabel() { 
     if ($('.label_check input').length) { 
      $('.label_check').each(function(){ 
       $(this).removeClass('c_on'); 
      }); 
      $('.label_check input:checked').each(function(){ 
       $(this).parent('label').addClass('c_on'); 
      });     
     }; 
     if ($('.label_radio input').length) { 
      $('.label_radio').each(function(){ 
       $(this).removeClass('r_on'); 
      }); 
      $('.label_radio input:checked').each(function(){ 
       $(this).parent('label').addClass('r_on'); 
      }); 
     }; 
    }; 
    $(document).ready(function(){ 
     $('.label_check, .label_radio').click(function(){ 
      setupLabel(); 
     }); 
     setupLabel(); 
    }); 

S'il vous plaît dites-moi ce que je ne sais pas avec ce code, l'aide est très appréciée.

Merci.

Answer 1

Je recommande vraiment d'utiliser jquery.uniform (puisque vous utilisez déjà jQuery, ou une alternative égale) pour les éléments de style tels que checkbox, radio et select. Il y a bien plus à faire que de placer une image au-dessus de l'élément de forme 'réel', comme gérer des clics sur l'étiquette, etc.

Answer 2

Si vous utilisez jquery.uniform, il y a un truc pour sélectionner une radio bouton dynamiquement.

Après avoir défini la valeur de l'élément de formulaire, par ex.

$("[name='buttongroup']['value='male']").attr("checked", true); 

... Il suffit de faire ce qui suit pour mettre à jour l'affichage de la sélection du bouton radio:

$.uniform.update(); 

Answer 3

Votre problème est que vous utilisez le même ID pour tous sont uniques de vos entrées et les ID . C'est pourquoi il change la première instance de l'id = "q_0"