Помогите найти ошибку

[RodgerFox]

Есть список радио кнопок, каждая находится в своем li, при нажатии на другой инпут или лабел класс меняется на активный у li.

Если работать с одним списком <ul><li../><li.../></ul> То все отлично, а как быть если их больше? Подскажите пожалуйста, я сам не смогу додумать.

Сам код:

$(document).ready(function(){
    $('.variants input[type="radio"]').click(function() {
        console.log('li[for="' + $(this).attr('id') + '"');
        $('li').removeClass('radioOn').addClass('radioOff');
        $('li[for="' + $(this).attr('id') + '"]').removeClass('radioOff').addClass('radioOn')
    });

    $('.variants input[type="radio"]:checked').click();
});

Примерный html:

<article>
 <ul>
   <li for="id_1"><input ... /><label .. /></li>
   <li for="id_1"><input ... /><label .. /></li>
 </ul>
</article>
<article>
 <ul>
   <li for="id_53"><input ... /><label .. /></li>
   <li for="id_54"><input ... /><label .. /></li>
 </ul>
</article>
<article>
 <ul>
   <li for="id_86"><input ... /><label .. /></li>
   <li for="id_87"><input ... /><label .. /></li>
 </ul>
</article>

p.s. для каждого article может использовать еще свой уникальный индификатор?

Edited November 27, 2012 by RodgerFox

[wwt]

$(document).ready(function(){
    $('input[type="radio"]').click(function() {
        $('li').removeClass('radioOn').addClass('radioOff');
        $(this).parent().removeClass('radioOff').addClass('radioOn');
    });
});

[RodgerFox]

$(document).ready(function(){
    $('input[type="radio"]').click(function() {
        $('li').removeClass('radioOn').addClass('radioOff');
        $(this).parent().removeClass('radioOff').addClass('radioOn');
    });
});

И как это работает?

http://jsfiddle.net/4Pgrn/

Вот структура

Edited November 28, 2012 by RodgerFox

[RodgerFox]

Помогите плз, up^^

[Great Rash]

http://jsfiddle.net/4Pgrn/3/

[RodgerFox]

А как добавить что бы первый вариант в каждом ul был выбран в начале?

[RodgerFox]

Пробовал дописать строчку, $('input[type=radio]:checked').addClass('radioOn'); не как. странно

[Great Rash]

Добавить ему класс.

[RodgerFox]

?

[Great Rash]

Постарайтесь включить голову.

[RodgerFox]

Ммм... большое спасибо. Не очень понял как вы это сделали. Надо самому в этом разбираться

[RodgerFox]

И еще последний вопрос, как дать первому ли class="radioOn" через js, а не через html?

Первому списку понятно как, а вот что бы каждому не понятно =\

[Great Rash]

Чем не устраивает CSS? Я, например, не вижу ни одной причины, чтобы перекладывать эту работу на JS.

[RodgerFox]

Блин не отправилось сообщение, дело все в шаблонизаторе. Поэтому добавить каждому первому элементу свой класс очень трудоемко. А если при помощи сss использовать :first-child то потом будут траблы при переключении на другие инпуты.

[Great Rash]

Каждому первому элементу добавить класс через шаблонизатор проще даже чем в JS. По элементам цикл пробегает? Если итерация цикла первая добавляем класс, куда уж проще?

[RodgerFox]

Пробовал несколько примером, короче разобрался)

$('ul li:first-child').addClass('on');

наверное спешил и поэтому сразу не получилось.

http://jsfiddle.net/4Pgrn/30/ Как заставить перент получать родителя не p, а li???

А вообще это не столь важно.

Использую html 5 поэтому инпут без слеша / в конце и можно не использовать параграф.

Большое вам спасибо. Вы очень мне помогли.