Переключатель проверяет статус с помощью 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 Нажмите на и проверьте, отмечен ли родной брат =«флажок», затем добавьте «выбранный» класс к родителю

2 Нажмите на и проверьте, не проверен ли родной элемент , затем добавьте флажок = «проверено» к брату и добавьте «выбранный» класс к родительскому также удалите все остальные «отмеченные» и «выбранные» в

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

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

Поскольку вы уже используете 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/

Answer 3

Я уверен, что это не самый элегантный способ, но с изменением вашей разметки (добавление классов '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
    }
});

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

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

на

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

Также от:

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

до

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

Удачи!