JavaScript チェックボックスのオンオフ切り替え複数の親子を連動させる

親のチェックボックスをオンにすれば、複数ある子のチェックボックスがオンになり、オフにすればオフになる。

そんなコントロールは調べたらすぐ見つかったが、複数の親がある場合に悩んだので備忘録。

例えば、

自動車という親、TOYOTA・HONDA・NISSAN・MAZDAという子

パソコンという親、Apple・Lenovo・SHARPという子

モニタという親、IO-DATA・IIYAMA・LGという子

それぞれが１つの画面上にチェックボックスとして存在する場合。

自動車の親にaddEventListenerでクリックイベントを追加してクラスを付けた子のチェックをオンオフするロジックは簡単だけど、それぞれの親すべてに同じ処理を書くのは無意味なのは解る。

考えたやり方は、まず親のチェックボックスID属性を付与し、onclickでファンクションを付与する。その引数はID属性の値と同じにする。ファンクション名は今回は適当に、js_check_toggleにする。

親の参考コードは

車
<input id="変数A" type="checkbox"
onclick="js_check_toggle('変数A')"></h4>

こんな感じ。複数親だから、当然DBからデータを取得してループ文でガンガン吐き出すのだから当然変数Aは変化する。

子のinputはクラス名を変数Aにする。

<label>
<input class="変数A" type="checkbox" 
name="" value="">
トヨタ
</label>

こんな感じ。子は複数あるのでID属性ではなくclass属性にする。

これももちろんDBからデータを取得してループ文でガンガン書き出すという前提です。

最後にJavaScriptは

  function js_check_toggle(id) {

    /*
     * name:チェックボックス親子
     * parm:親checkboxのID属性がパラメータ
     * event:親inputのonclickから呼び出される
     * parmと子のclass属性と同じ値にすること
     */
    var parent = document.getElementById(id);
    var children = document.getElementsByClassName(id);
    for(var i = 0; i < children.length; i++) {
      if(parent.checked === false) {
        children[i].checked = false;
      }else{
        children[i].checked = true;
      }
    }
  }

これでいけた。