체크박스

<div role="group" aria-labelledby="toppings-title">
  <h3 id="toppings-title">토핑</h3>
  <div role="checkbox" tabindex="0" aria-checked="mixed"
       aria-controls="t1 t2 t3">전체 선택</div>
  <input type="checkbox" id="t1"> <label for="t1">치즈</label>
  <input type="checkbox" id="t2" checked> <label for="t2">버섯</label>
  <input type="checkbox" id="t3"> <label for="t3">올리브</label>
</div>

<div role="checkbox" tabindex="0" aria-checked="false" id="agree">
  이용약관에 동의
</div>

var box = document.getElementById('agree');

function toggle() {
  var on = box.getAttribute('aria-checked') === 'true';
  box.setAttribute('aria-checked', String(!on));
}

box.addEventListener('click', toggle);
box.addEventListener('keydown', function (e) {
  if (e.key === ' ') {
    e.preventDefault();   // Space의 기본 동작(스크롤) 막기
    toggle();
  }
});

<fieldset>
  <legend>피자 토핑</legend>
  <div role="checkbox" id="all" tabindex="0" aria-checked="mixed"
       aria-controls="opt1 opt2 opt3">전체 선택</div>
  <ul>
    <li><input type="checkbox" id="opt1"> <label for="opt1">치즈 추가</label></li>
    <li><input type="checkbox" id="opt2" checked> <label for="opt2">버섯</label></li>
    <li><input type="checkbox" id="opt3"> <label for="opt3">올리브</label></li>
  </ul>
</fieldset>

var all = document.getElementById('all');
var items = ['opt1', 'opt2', 'opt3'].map(function (id) {
  return document.getElementById(id);
});
var saved = items.map(function (el) { return el.checked; }); // 마지막 일부 선택 조합

function syncAll() {
  var n = items.filter(function (el) { return el.checked; }).length;
  all.setAttribute('aria-checked',
    n === 0 ? 'false' : n === items.length ? 'true' : 'mixed');
}

function toggleAll() {
  var state = all.getAttribute('aria-checked');
  var partial = saved.some(Boolean) && !saved.every(Boolean);
  items.forEach(function (el, i) {
    if (state === 'mixed') el.checked = true;          // 혼합 → 모두 선택
    else if (state === 'true') el.checked = false;     // 모두 선택 → 모두 해제
    else el.checked = partial ? saved[i] : true;       // 모두 해제 → 일부 선택 복원
  });
  syncAll();
}

all.addEventListener('click', toggleAll);
all.addEventListener('keydown', function (e) {
  if (e.key === ' ') { e.preventDefault(); toggleAll(); }
});
items.forEach(function (el) {
  el.addEventListener('change', function () {
    saved = items.map(function (x) { return x.checked; });
    syncAll();
  });
});
syncAll();