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

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

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

Answer 3

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

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

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

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

$.uniform.update();