Checkbox

<div class="cw">
  <label class="cbl parent"><input type="checkbox" id="pAll"><span class="box"><svg viewBox="0 0 16 16"><path d="M3 8l3.5 3.5L13 4.5"/></svg></span>전체 선택</label>
  <div class="children">
    <label class="cbl"><input type="checkbox" class="child" checked><span class="box"><svg viewBox="0 0 16 16"><path d="M3 8l3.5 3.5L13 4.5"/></svg></span>디자인</label>
    <label class="cbl"><input type="checkbox" class="child"><span class="box"><svg viewBox="0 0 16 16"><path d="M3 8l3.5 3.5L13 4.5"/></svg></span>개발</label>
    <label class="cbl"><input type="checkbox" class="child"><span class="box"><svg viewBox="0 0 16 16"><path d="M3 8l3.5 3.5L13 4.5"/></svg></span>마케팅</label>
  </div>
</div>

.cw{width:min(200px,88%);font-size:13px;color:var(--fg)}
.cbl{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}
.parent{font-weight:700;border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:8px}
.children{display:grid;gap:2px;padding-left:6px}
.cbl input{position:absolute;opacity:0;width:1px;height:1px}
.box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;flex-shrink:0;background:var(--surface);transition:background .15s,border-color .15s}
.box svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .15s}
input:checked + .box{background:var(--accent);border-color:var(--accent)}
input:checked + .box svg{stroke-dashoffset:0}
input:indeterminate + .box{background:var(--accent);border-color:var(--accent)}
input:indeterminate + .box::after{content:"";width:9px;height:2px;background:#fff;border-radius:1px}

const parent = document.getElementById('pAll');
const kids = [...document.querySelectorAll('.child')];
function syncParent() {
  const n = kids.filter(k => k.checked).length;
  parent.checked = n === kids.length;
  parent.indeterminate = n > 0 && n < kids.length;
}
syncParent();
let auto = true;
[parent, ...kids].forEach((el) => el.addEventListener('click', () => { auto = false; if (el === parent) kids.forEach(k => k.checked = parent.checked); syncParent(); }));

let i = 0;
setInterval(() => {
  if (!auto) return;
  kids[i % kids.length].checked = !kids[i % kids.length].checked;
  syncParent();
  i++;
}, 1000);