Радиокнопка проверяется состояние с JQuery

Question

Вот основной код

<ul> 
<li> 
    <input type="radio" name="r" value="a" id="a" checked="checked" /> 
    <label for="a">A</label> 
</li> 
<li> 
    <input type="radio" name="r" value="b" id="b" /> 
    <label for="b">B</label> 
</li> 
</ul> 

Так что мне нужно, чтобы он работать как:

1 Нажмите на < этикетке > и проверить, если родственный < радио > является проверил = " проверил " затем добавить " выбранный " класс родителя < Ли >

-Нажмите на < этикетки > и проверить, если родственный < радио > не установлено, то добавить проверили = " проверил " на собрат < радио > и добавить " выбранный " класс родителю <Li> также удалить все другие " проверил " и " выбранный " в < ул >

Не могли бы вы мне помочь, пожалуйста!

Answer 1

Нажав на ярлык, вы должны автоматически проверять переключатели в браузере. Таким образом, вам просто нужно добавить событие click к метке/вводу, которое установит класс в li.

Что-то, как это должно работать:
HTML (я просто добавил id="mylist")

<ul id="mylist"> 
<li> 
    <input type="radio" name="r" value="a" id="a" checked="checked" /> 
    <label for="a">A</label> 
</li> 
<li> 
    <input type="radio" name="r" value="b" id="b" /> 
    <label for="b">B</label> 
</li> 
</ul>

JavaScript

$(function() { 
$("#mylist input, #mylist label").click(function() { 
    $("#mylist li").removeClass("selected"); 
    $(this).parent().addClass("selected"); 
}); 
}); 

Answer 2

Я уверен, что это не самый изящный способ, но с изменением вашей разметки (добавление класса 'a' и 'b' к вашему li - в основном то же значение, что и идентификатор радиоэлемента.) здесь мы идем:

$('label').click(function(){ 
    // if the radio is already checked 
    if ($('#'+$(this).attr('for')).attr('checked') == 'checked') { 
     $('ul li').removeClass('selected'); // remove previous selected items 
     $('.'+$(this).attr('for')).addClass('selected'); // add new selected item 
    } else { 
     // radio not checked 
     $('#'+$(this).attr('for')).attr('checked','checked'); // check radio (altough this should be automatic, without js 
     $('ul li').removeClass('selected'); // clear previous selected items 
     $('.'+$(this).attr('for')).addClass('selected'); // add new selected item 
    } 
}); 

для скорости, я хотел бы предложить добавить идентификатор к ул, скажем, "список", и есть изменение кода из

$('label').click(function(){ 

к

$('#list label').click(function(){ 

Кроме того, из:

$('ul li').removeClass('selected'); // remove previous selected items 

в

$('#list li').removeClass('selected'); // remove previous selected items 

Удачи!

Answer 3

Поскольку вы уже используете label с for атрибутом там действительно не нужно прикладывать событие к label, если вам не нужно бороться с IE6, что затрудняет жизнь.

$(':radio[name="r"]').change(function(){ 
    $(this).parent('li').addClass('selected').siblings().removeClass('selected'); 
}).filter(':checked').change(); 

Документация: change()

См: http://www.jsfiddle.net/yijiang/mzPk9/