【初心者でもわかる】親子関係をもつチェックボックスで、チェックを連動させる方法

どうも7noteです。チェックボックスの連動処理を実装します。

今回作っていくのは以下のような仕様のチェックボックスです。

• 親子関係のあるチェックボックス。（例：大阪府➡大阪市、吹田市、堺市・・・）
• 親がチェックされたら、すべての子にチェックをつける。
• 子がすべてチェックされたら、親にチェックをつける。
• 子がすべてチェックが外れたら、親のチェックを外す。

それでは、実際にチェックボックスの連動処理のソースをどうぞ。

連動するチェックボックスの書き方

index.html

<dl class="preflist">
  <dt><label><input type="checkbox" name="prefA" value="東京">東京</label></dt>
  <dd><label><input type="checkbox" name="prefB" value="○○区">○○区</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○区">○○区</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○区">○○区</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○区">○○区</label></dd>
</dl>

<dl class="preflist">
  <dt><label><input type="checkbox" name="prefA" value="大阪">大阪</label></dt>
  <dd><label><input type="checkbox" name="prefA" value="大阪市">大阪市</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○市">○○市</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○市">○○市</label></dd>
</dl>

<dl class="preflist">
  <dt><label><input type="checkbox" name="prefA" value="福岡">福岡</label></dt>
  <dd><label><input type="checkbox" name="prefA" value="福岡市">福岡市</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○市">○○市</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○市">○○市</label></dd>
  <dd><label><input type="checkbox" name="prefB" value="○○市">○○市</label></dd>
</dl>

style.css

dl + dl {
  margin: 20px 0 0;
}

script.js

$(".preflist dt input[type='checkbox']").change(function () {                   // dtのinput（都道府県）が変更された時
  var area = $(this).parents(".preflist").find("dd input[type='checkbox']");    // 選択された都道府県の市区町村を変数に格納
  if ($(this).is(":checked")) {          // チェックがついた時は、、、
    area.prop("checked",true);           // 選択した都道府県の市区町村全てをチェックする
  } else {
    area.prop("checked",false);          // 選択した都道府県の市区町村のチェックを全て外す
  }
});

$(".preflist dd input[type='checkbox']").change(function () {  // ddのinput（市区町村）が変更された時
  var length = $(this).parents(".preflist").find("dd").length; // 兄弟要素（ほかの市区町村）を含めて何個あるか数えて変数に入れる
  var checked_length = $(this).parents(".preflist").find("dd input:checked").length;  // 既にチェックがついている市区町村が何個か数えて変数に入れる
  var pref = $(this).parents(".preflist").find("dt input");  //選択された市区町村の親の都道府県を変数に格納
if(checked_length == 0){                   // もしチェックが0件だったら
    pref.prop("checked",false);            // 都道府県のチェックを外す
  } else if(length == checked_length) {    // もしチェックが全てついていたら
    pref.prop("checked",true);             // 都道府県のチェックを付ける
  }
});

解説

まずhtml側で、親にあたるチェックボックスを<dt>、子にあたるチェックボックスを<dd>とします。
主にjsの処理の解説になりますが、親チェックボックスをクリックした時と、子チェックボックスをクリックした時の2種類の処理に分けます。

親チェックボックスをクリックした際は2つのパターンがあり、親がチェックが付けば子もチェックをつける。もしくは親がチェックはずれたときに子もチェックを外す。

子がチェックされた時は、子の数と、既にチェックがついている子の数を取得してif文で分岐を行います。もし一個もチェックが入っていない時は親のチェックも外し、全ての子がチェックがついた時は親にもチェックをつける処理をしています。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ