Как добавить класс в javascript код группового выделения чек-боксов?

Question

[Dimtri]

Здравствуйте.
https://codepen.io/Dmitriy_76/pen/wvxdYzQ
Есть код группового выделения чек-боксов внутри fieldset по клику на чек-бокс внутри тега legend.
Не могу понять, как доделать данный скрипт таким образом, чтобы, если данный, управляющий чек-бокс был активен (имел состояние :checked), то к его родительскому legend добавлялся активный класс. И, соответственно, активный класс пропадал бы, когда чек-бокс переставал быть checked. Не важно, по клику по нему самому, или по одному из чек-боксов дочерней группы.
Может ли кто-нибудь помочь?

Comments

[v3shin]

Я бы после проставления всех чекбоксов вызывал бы функцию, которая бы проверяла все legend input[type="checkbox"] и проставляла/снимала для .closest('legend') нужный класс.

Answer 1

[0xD34F]

const groupSelector = 'fieldset.js-tree-box';
const mainSelector = 'legend input';
const itemSelector = 'legend + span input';
const activeClass = 'active';

document.addEventListener('change', ({ target: t }) => {
  const group = t.closest(groupSelector);
  if (group) {
    const main = group.querySelector(mainSelector);
    const items = [...group.querySelectorAll(itemSelector)];

    if (main === t) {
      items.forEach(n => n.checked = t.checked);
    } else {
      const numChecked = items.reduce((acc, n) => acc + n.checked, 0);
      main.checked = numChecked === items.length;
      main.indeterminate = 0 < numChecked && numChecked < items.length;
    }

    group.classList.toggle(activeClass, main.checked);
  }
});