Переключать классы с помощью радио-кнопки в jQuery

Question

У меня есть набор радиокнопок, в которых, когда я нажимаю радиокнопку, я хочу, чтобы метка меняла цвет или что-то еще. Но когда я нажимаю другую радиокнопку, цвет исчезает. Поэтому у меня есть что-то вроде этого:

jQuery('label').mouseup(function(){
   jQuery(this).prev().attr('checked', 'checked');
   jQuery('input').next().removeClass('selected');
   jQuery('input:checked').next().addClass('selected');

});

если вам нужно посмотреть html:

<input type="radio" id="radio1" name="myRadio" value="option-1" />
<label for="radio1">Label 1</label>


<input type="radio" id="radio2" name="myRadio" value="option-2" />
<label for="radio2">Label 2</label>

Сначала удаляется «выбранный» класс из всех меток, а затем повторно применяется только к отмеченным меткам.

Это работает и просто, но я подумал, что это не самый эффективный способ сделать это. Я полагаю, что javascript выполняет итерацию по каждому элементу ввода и использует больше ресурсов, чем необходимо.

Мне любопытно, если кто-нибудь знает общий способ сделать это более эффективно. Я, кажется, делаю подобные вещи довольно часто в моем коде jQuery. Я только что использовал jQuery в течение последних 3 месяцев или около того.

Answer 1

Есть несколько вещей, о которых стоит упомянуть.

Нажатие на <label> автоматически изменит значение <input>.Вам не нужно устанавливать checked attr вручную, и, следовательно, вы можете вместо этого связываться с событием change на радиостанциях.Это также позволит событиям клавиатуры выбирать / отменять выбор радиомодулей и работать в любое время, когда значения радиосигналов меняются, а не только когда кто-то наводит указатель мыши на метку.

Кроме того, вы можете сохранить всю коллекцию радиовходовв своей собственной переменной, чтобы потом ссылаться на них, не нужно снова искать через DOM.

Предлагаемый код (w / jsfiddle preview )

var $radios = jQuery('input[type=radio]');
$radios.change(function() {
   $radios.next().removeClass('selected');
   $radios.filter(':checked').next().addClass('selected');
});

Answer 2

На самом деле, похоже, что работает при нажатии на ярлык. Я не стал бы сильно беспокоиться о количестве элементов DOM, которые ищутся, если производительность в порядке. Оптимизируйте, когда это станет проблемой, а не раньше. Ясность / читаемость, вероятно, важнее. Однако вы можете улучшить его, используя некоторую информацию из метки или связанного с ней ввода для сужения селекторов. Использование end и filter также позволит вам повторно использовать второй запрос.

$('label').click(function(){
   var radio = $(this).prev();
   radio.attr('checked', 'checked'); 
   var name = radio.attr('name');
   $('input[name=' + name ']').next()
                              .removeClass('selected')
                              .end()
                              .filter(':checked')
                              .next()
                              .addClass('selected'); 

}); 

Обратите внимание, что использование change на реальных радиостанциях, как некоторые другие предполагают, может быть лучше. Вы можете использовать те же методы с этим.

$('input[type=radio]').change( function() {
     $('input[type=radio]').next()
                           .removeClass('selected')
                           .end()
                           .filter(':checked')
                           .next()
                           .addClass('selected');
});

Используйте обработчики live, если вы динамически добавляете радиостанции на страницу.

Answer 3

Помимо использования mouseup, которое кажется немного необычным в этом случае (по крайней мере, для меня), ваш код в порядке.

Я бы использовал click или change.