Как проверить, есть ли в списке checkbox активный элемент?

Question

[Pit]

Есть список checkbox`сов, к примеру 3 штуки в ul блоке. Мне нужно проверять если хоть 1 элемент выбран, то добавить класс в ul список. Таких списков может быть больше 1, класс должен добавляться именно в родительский ul список, а не во все списки, которые будут.

https://codepen.io/pit6262/pen/dyywoKN

Answer 1

[0xD34F]

Где элементы находятся, какой класс надо переключать:

const container = document.querySelector('ul.select-check');
const className = 'здесь ваш класс';

Слушаем событие change, поднимаемся от целевого элемента до ближайшего ul.

Дальше можем проверить наличие активного чекбокса, соорудив соответствующий селектор:

container.addEventListener('change', e => {
  const ul = e.target.closest('ul');
  ul.classList.toggle(
    className,
    !!ul.querySelector(':scope > li > label > :checked')
  );
});

Или, есть вариант последовательно проверять состояние всех чекбоксов, пока не встретится активный:

container.querySelectorAll('[type="checkbox"]').forEach(function(n) {
  n.addEventListener('change', this);
}, ({ target: t }) => {
  while ((t = t.parentNode).tagName !== 'UL') ;
  t.classList.toggle(
    className,
    Array.prototype.some.call(
      t.children,
      n => n.children[0].children[0].checked
    )
  );
});

Comments

[Pit]

Спасибо =) помогли