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