BFE.devでのAI解答例 - フロントエンドシステムデザイン
20. Implement nested checkboxes

答え：

以下は実装の例です。

HTML:

<label>
  <input type="checkbox" id="parentCheckbox">
  Parent Checkbox
</label>
<ul>
  <li>
    <label>
      <input type="checkbox" class="childCheckbox">
      Child Checkbox 1
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" class="childCheckbox">
      Child Checkbox 2
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" class="childCheckbox">
      Child Checkbox 3
    </label>
  </li>
</ul>

JavaScript:

const parentCheckbox = document.querySelector('#parentCheckbox');
const childCheckboxes = document.querySelectorAll('.childCheckbox');

function updateParentCheckbox() {
  const checkedChildCheckboxes = document.querySelectorAll('.childCheckbox:checked');
  if (checkedChildCheckboxes.length === 0) {
    parentCheckbox.checked = false;
    parentCheckbox.indeterminate = false;
  } else if (checkedChildCheckboxes.length === childCheckboxes.length) {
    parentCheckbox.checked = true;
    parentCheckbox.indeterminate = false;
  } else {
    parentCheckbox.checked = false;
    parentCheckbox.indeterminate = true;
  }
}

parentCheckbox.addEventListener('click', () => {
  childCheckboxes.forEach((checkbox) => {
    checkbox.checked = parentCheckbox.checked;
  });
});

childCheckboxes.forEach((checkbox) => {
  checkbox.addEventListener('click', () => {
    updateParentCheckbox();
  });
});

このコードでは、parentCheckboxのクリックイベントをリッスンし、子チェックボックスの状態を更新します。 childCheckboxesの各チェックボックスにもクリックイベントがリッスンされます。updateParentCheckbox()は、子チェックボックスがクリックされるたびに呼び出され、親チェックボックスの状態を更新します。親チェックボックスには、checkedとindeterminateプロパティがあります。特定の状態に設定すると、それに応じて表示される状態が変わります。