Выделение только одной картинки из нескольких?

Question

[VaaL2004]

Здравствуйте, прошу помощи, в jQuery совсем недавно, не могу разобраться, так что сразу прошу прощения если вопрос окажется глупым, а решение простым.



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

<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 может быть несколько, если у товара несколько вариантов цвета) изменялся класс второго , а у первого восстанавливался старый.



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

<script type="text/javascript"><!--

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

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



Прошу помощи, уважаемая публика.

Answer 1

[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 2

[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 3

[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 4

[DanilaMaster]

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

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

Answer 5

[sylord]

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

.optionlbl:checked + label img {

}

Comments

[_ _]

Совсем