[jQuery] 全選択・全解除チェックボックスの実装

2019-03-14JavaScriptjQuery

下記のようなチェックボックスを作る
  1. 「全て選択」チェックボックスにチェックすると、全選択される
  2. 全選択時に、「全て選択」チェックボックスのチェックを外すと、全部のチェックボックスのチェックが外れる
  3. チェックボックスのチェックを1つでも外すと、「全て選択」チェックボックスのチェックが外れる

デモ

See the Pen checkbox all selected by AgoPeanuts (@AgoPeanuts) on CodePen.

HTML

まずは、 jQuery を読み込んでおく

jQuery CDN はココから 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

チェックボックスを div とかで囲って、ひと塊りにしておく

<label for="all"><input type="checkbox" name="allChecked" id="all">全選択</label>
<div id="boxes">
  <label><input type="checkbox" name="chk[]" value="A">選択肢 A</label>
  <label><input type="checkbox" name="chk[]" value="B">選択肢 B</label>
  <label><input type="checkbox" name="chk[]" value="C">選択肢 C</label>
  <label><input type="checkbox" name="chk[]" value="D">選択肢 D</label>
</div>

jQuery

$(function() {
    // 1. 「全選択」する
    $('#all').on('click', function() {
      $("input[name='chk[]']").prop('checked', this.checked);
    });
    // 2. 「全選択」以外のチェックボックスがクリックされたら、
    $("input[name='chk[]']").on('click', function() {
      if ($('#boxes :checked').length == $('#boxes :input').length) {
        // 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
        $('#all').prop('checked', true);
      } else {
        // 1つでもチェックが入っていたら、「全選択」 = checked
        $('#all').prop('checked', false);
      }
    });
  });

1. の処理
「全選択」チェックボックスがクリックされたら、 input type="checkbox" (チェックボックス)の要素を全てチェック状態にする

2. の処理
「全選択」以外のチェックボックスがクリックされたら、選択状態のチェックボックスと、未選択のチェックボックスの数を比較し、全チェックボックスが選択状態でない場合、「全選択」チェックボックスのチェックが外れるようになっている

選択・未選択チェックボックスの数の比較は、 id="boxes" 要素の中にあるチェックボックスの総数 $('#boxes :input').length と、チェックされているチェックボックスの数 $('#boxes :checked').length が一致するかどうかで確認している

テーブルでチェックボックス全選択

上記だと div で一括りにしているが、テーブルの各行にチェックボックスがあって全選択させたいとき

See the Pen zbpRzJ by AgoPeanuts (@AgoPeanuts) on CodePen.

HTML

<table border=1 cellspacing=0>
  <thead><tr>
    <th><label>全選択<br /><input type="checkbox" id="all"></label>
    <th>Hoge
  </thead>
  <tbody id="boxes">
    <tr><td ><input type="checkbox" name="chk[]" value="A"><td>Hoge1
    <tr><td><input type="checkbox" name="chk[]" value="B"><td>Hoge222
    <tr><td><input type="checkbox" name="chk[]" value="C"><td>Hoge3
  </tbody>
</table>

囲みは div でなくてもいい

table タグに id を指定すると、選択・未選択チェックボックスの数の比較のとき「全選択」チェックボックスもカウントされる
id の指定場所は、全選択させたいチェックボックスがある範囲にする



以上

Posted by Agopeanuts