Как на 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(n => {
  n.addEventListener('change', onChange);
});

function onChange({ target: t }) {
  this.querySelectorAll(itemSelector).forEach(n => {
    n.classList.toggle(activeClass, n.contains(t));
  });
}

// или

document.addEventListener('change', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    item.closest(containerSelector).querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle('active', n === item);
    });
  }
});