Как выделять только одну картинку из нескольких?

Question

[VaaL2004]

Есть интернет-магазин, в нем карточка товара с описанием, фото, и несколькими опциями (выбор цвета товара):

<ul class="options-ul">
  <li>
    <input id="option-value-265" class="optionlbl" type="radio" value="265" name="option[346]">
    <label for="option-value-265">
      <img alt="Синий" src="blue-50x50.jpg">
    </label>
    <label for="option-value-265">Синий</label>
  </li>
</ul>

Как с помощью jQuery сделать, чтобы при клике на изображение изменялся класс тэга на checked, но при клике на второе (тэгов li может быть несколько, если у товара несколько вариантов цвета) изменялся класс второго, а у первого восстанавливался старый?

Где-то в глубинах гугла нашел подобное решение:

$('input[name="option[346]"]:radio').on('change', function() {
  $(this).closest('li').toggleClass('checked');
});

Но при таком раскладе по нажатию на чекбокс класс меняется на checked, а при нажатие на второй меняется у второго, но первый остаётся неизменным (т.е. checked не убирается).

Answer 1

[WebSpider]

Например, можно запомнить выбранный элемент в переменной

var currentElement = null; 
$('input[name="option[346]"]:radio').on('change', function() {
  if (currentElement) currentElement.removeClass('checked');
  currentElement = $(this).closest('li').addClass('checked'); 
}); 

Comments

[WebSpider]

Либо сначала сбрасывать все элементы

$('input[name="option[346]"]:radio').on('change', function() {
  $(this).closest('ul').find('li').removeClass('checked');
  $(this).closest('li').addClass('checked'); 
}); 

Выбирайте что больше нравится :)

Answer 2

[RubaXa]

jsfiddle.net/RubaXa/E9juB/ — demo

$('ul.options-ul').on('change', function (evt){
    // Убираем выделение
    $(this).find('.checked').removeClass('checked', true).prop('checked', false);

    // Добавляем выделение
    $(evt.target).closest('li').addClass('checked');
});

Comments

[RubaXa]

Ох фигню я написал, всё проще — jsfiddle.net/RubaXa/E9juB/3/

$('ul.options-ul').on('change', function (evt){
    // снять выделение
    $(this).find('.checked').removeClass('checked');
    // выделить 
    $(evt.target).closest('li').addClass('checked');
});

Answer 3

[DanilaMaster]

Можно вот так:

$('ul.options-ul input').on('change', function (){
    $(this).closest('li').addClass('checked').siblings().removeClass('checked');
});

Answer 4

[spmbt]

Тогда уж лучше элегантно

$( function(){
	var selChk = 'li input'; //добавить нужное
	$('ul.class_of_ul').on('change', selChk, function(ev){
	$(ev.delegateTarget).find(selChk).not($(this).addClass('checked') )
		.removeClass('checked').removeAttr('checked');
}); });

Answer 5

[sylord]

Возможно совсем не в тему, но если к li добавляется класс checked с целью как-то выделить img то можно и на CSS

.optionlbl:checked + label img {

}

Comments

[_ _]

Совсем