Как выделить элемент, содержащий нажатую radio кнопку?

Question

[Михаил]

Есть три строки с радиокнопками.
Надо окрашивать активную кнопку (т.е. у которой инпут выбран).
Пытаюсь через скрипт, получил все элементы label, при клике нахожу родительский элемент - строку, а вот дальше как вниз идти, не пойму, как через цикл проверить все элементы данной строки на активность.

Или через проверку наличия атрибута checked или через проверку наличия класса active как-то сделать, не пойму..

вот пример
https://codepen.io/mk3mk/pen/MWYbEwM?editors=0110

Answer 1

[0xD34F]

Где элементы находятся, что за элементы, какой класс отвечает за выделение активного:

const containerSelector = '.radio-line';
const itemSelector = `${containerSelector} .radio-label`;
const activeClass = 'active';

Слушаем событие change, переключаем класс:

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

    t.classList.add(activeClass);
  }
});

// или

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

// или

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('change', onChange);
}

function onChange() {
  let container = this;
  while (!(container = container.parentNode).matches(containerSelector)) ;

  for (const n of container.querySelectorAll(itemSelector)) {
    n.classList.toggle(activeClass, n === this);
  }
}

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

.radio-label:has(:checked) {
  background: green;
}

Comments

[Михаил]

спасибо!