Как на jQuery поменять стиль у label с активным input radio?

Question

[Антон]

https://jsfiddle.net/qmvjn1e8/
Как сделать, если выбрали какой-либо input, то у его label сменить class с red на green? Т.е. у активного input всегда label green, у неактивного label - red.

Answer 1

[0xD34F]

Два класса не нужны, одного хватит - есть состояние дефолтное (без класса) и активное (с классом).
Так что вместо

.red{border:3px solid red;;}
.green{border:3px solid red;;}

пусть будет

.items-list-item-colors label {
  border: 3px solid red;
}

.items-list-item-colors label.active {
  border-color: green;
}

Соответственно, из разметки class="red" вырезаете.

Где, кому и какой класс будем переключать:

const containerSelector = '.items-list-item-colors';
const itemSelector = 'label';
const activeClass = 'active';

Такие есть варианты:

$(containerSelector).change(function() {
  $(itemSelector, this)
    .removeClass(activeClass)
    .has(':checked')
    .addClass(activeClass);
});

// или

document.querySelectorAll(containerSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, function(e) {
  this.querySelectorAll(itemSelector).forEach(n => {
    n.classList.toggle(activeClass, n.contains(e.target));
  });
});

// или

document.addEventListener('change', ({ target: t }) => {
  if (t = t.closest(itemSelector)) {
    const prev = t.closest(containerSelector).querySelector(`.${activeClass}`);
    prev && prev.classList.remove(activeClass);
    t.classList.add(activeClass);
  }
});

UPD. Наконец-то дождались. Теперь js код тут не обязателен:

- .items-list-item-colors label.active {
+ .items-list-item-colors label:has(:checked) {