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プロパティがあります。特定の状態に設定すると、それに応じて表示される状態が変わります。