Изменение кнопок радио изображений, помощь

Question

Эй, ребята. Я не очень программист, но все равно нужно сделать некоторую кодировку.

Теперь у меня есть проблема с изменением изображения кнопки радио с помощью jQuery. У меня есть этот код в Интернете, но он все еще не работает. Он изменяет изображения кнопок радио, но когда я пытаюсь выбрать, она изменяет только изображение первого бокса радио (каждый раз)

Вот мой 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> 

Вот CSS. Надеюсь, у меня все получилось.

#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; } 

И вот код 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(); 
    }); 

Пожалуйста, сообщите мне, что я не так с этим кодом, помощь очень ценится.

спасибо.

Answer 1

Я действительно рекомендую использовать jquery.uniform (поскольку вы уже используете jQuery или любую равную альтернативу) для элементов формы стиля, таких как флажок, радио и выбор. Существует гораздо больше, чем просто размещение изображения над «реальным» элементом формы, например обработка кликов на ярлыке и т. Д.

Answer 2

Если вы используете jquery.uniform, есть трюк для выбора радио динамически.

После установки значения элемента формы, например.

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

... просто сделать следующее, чтобы обновить отображение выбора кнопки радио:

$.uniform.update(); 

Answer 3

Ваша проблема заключается в том, что вы используете один и тот же идентификатор для всех ваших входов и идентификаторы уникальны , Вот почему он меняет первый экземпляр id = "q_0"