Checkbox Tree — Tri-State Parent/Child Checkboxes

<div class="ck-card">
  <h3>Select permissions</h3>
  <ul class="ck-tree" id="ckTree" role="tree">
    <li role="treeitem" data-id="content">
      <div class="ck-row"><button class="ck-tog" type="button" aria-label="Toggle"></button><label class="ck-lbl"><input type="checkbox"><span>Content</span></label></div>
      <ul class="ck-children" role="group">
        <li role="treeitem" data-id="content-read"><div class="ck-row"><span class="ck-spacer"></span><label class="ck-lbl"><input type="checkbox"><span>Read articles</span></label></div></li>
        <li role="treeitem" data-id="content-write"><div class="ck-row"><span class="ck-spacer"></span><label class="ck-lbl"><input type="checkbox"><span>Write &amp; edit</span></label></div></li>
        <li role="treeitem" data-id="content-publish"><div class="ck-row"><span class="ck-spacer"></span><label class="ck-lbl"><input type="checkbox"><span>Publish</span></label></div></li>
      </ul>
    </li>
    <li role="treeitem" data-id="billing">
      <div class="ck-row"><button class="ck-tog" type="button" aria-label="Toggle"></button><label class="ck-lbl"><input type="checkbox"><span>Billing</span></label></div>
      <ul class="ck-children" role="group">
        <li role="treeitem" data-id="billing-view"><div class="ck-row"><span class="ck-spacer"></span><label class="ck-lbl"><input type="checkbox"><span>View invoices</span></label></div></li>
        <li role="treeitem" data-id="billing-manage"><div class="ck-row"><span class="ck-spacer"></span><label class="ck-lbl"><input type="checkbox"><span>Manage payment methods</span></label></div></li>
      </ul>
    </li>
  </ul>
  <p class="ck-out" id="ckOut">0 selected</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;color:#0f172a;display:flex;justify-content:center;padding:36px 18px}

.ck-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px 22px;width:100%;max-width:360px;box-shadow:0 12px 34px -22px rgba(0,0,0,.3)}
.ck-card h3{font-size:15px;font-weight:800;margin-bottom:12px}

.ck-tree,.ck-children{list-style:none}
.ck-children{overflow:hidden;transition:height .2s ease}
.ck-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:8px}
.ck-row:hover{background:#f8fafc}
.ck-tog{width:18px;height:18px;border:none;background:none;cursor:pointer;flex-shrink:0;position:relative}
.ck-tog::before{content:'';position:absolute;inset:0;margin:auto;width:0;height:0;border-left:5px solid #94a3b8;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(0);transition:transform .15s}
.ck-tog.ck-open::before{transform:rotate(90deg)}
.ck-spacer{width:18px;flex-shrink:0}
.ck-lbl{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;cursor:pointer;user-select:none}
.ck-lbl input{width:17px;height:17px;accent-color:#6366f1;cursor:pointer}

.ck-out{margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9;font-size:12.5px;font-weight:700;color:#4f46e5}

var tree = document.getElementById('ckTree');
var out = document.getElementById('ckOut');
var parents = Array.prototype.slice.call(tree.querySelectorAll(':scope > li[role=treeitem]'));

function childBoxes(li) { return Array.prototype.slice.call(li.querySelectorAll('.ck-children input[type=checkbox]')); }
function parentBox(li) { return li.querySelector(':scope > .ck-row input[type=checkbox]'); }

// Set a parent's checkbox to checked / unchecked / indeterminate based on children.
function refreshParent(li) {
  var kids = childBoxes(li);
  var on = kids.filter(function (c) { return c.checked; }).length;
  var box = parentBox(li);
  box.checked = on === kids.length && kids.length > 0;
  box.indeterminate = on > 0 && on < kids.length;
}

function selectedLeaves() {
  return Array.prototype.slice.call(tree.querySelectorAll('.ck-children input:checked')).length;
}
function report() { var n = selectedLeaves(); out.textContent = n + ' selected'; }

parents.forEach(function (li) {
  var pbox = parentBox(li);
  // Parent toggles all children.
  pbox.addEventListener('change', function () {
    childBoxes(li).forEach(function (c) { c.checked = pbox.checked; });
    pbox.indeterminate = false;
    report();
  });
  // Children update the parent's tri-state.
  childBoxes(li).forEach(function (c) {
    c.addEventListener('change', function () { refreshParent(li); report(); });
  });
  // Expand / collapse with height animation.
  var tog = li.querySelector(':scope > .ck-row .ck-tog');
  var group = li.querySelector(':scope > .ck-children');
  tog.classList.add('ck-open');
  group.style.height = 'auto';
  tog.addEventListener('click', function () {
    var open = tog.classList.toggle('ck-open');
    if (open) { group.style.height = group.scrollHeight + 'px'; group.addEventListener('transitionend', function te() { group.style.height = 'auto'; group.removeEventListener('transitionend', te); }); }
    else { group.style.height = group.scrollHeight + 'px'; requestAnimationFrame(function () { group.style.height = '0px'; }); }
  });
  refreshParent(li);
});

report();