親のチェックボックスに紐付けたチェックボックスを全てチェックする

親のチェックボックスのチェック状態を親に紐付けた子供のチェックボックスにも反映させたい
↓こういうやつ

これをピュアJSで書いたときの備忘録

コード

解説

HTML

1. 親チェックボックスに子供を紐付ける用のカスタムデータ属性(data-id="1")をつける
   (親であることを判別できるのであればclass名などで管理してもOK)

<label>親チェック1<input type="checkbox" data-id="1" class="check-parent"></label>

1. 親に紐付ける子供となるチェックボックスに親のid(data-parent-id="1")を紐付ける

<label>親1子供1<input type="checkbox" data-parent-id="1"></label>

JavaScript

1. 親となるチェックボックス要素のchangeイベントをループ処理で実施する
2. 親のdataset.idに紐付いている子供の要素を取得して, ループ処理で親のチェック状態を子供のチェック状態と同じにする

Array.from(document.querySelectorAll('.check-parent')).map(checkParent => {
  checkParent.addEventListener('change', () => {
    Array.from(document.querySelectorAll(`[data-parent-id="${checkParent.dataset.id}"]`)).map(checkChild => {
      checkChild.checked = checkParent.checked
    })
  })
})