【jQuery】チェックボックスの全選択・全解除

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryでチェックボックスの全選択・全解除を設置する方法をご紹介します。

JavaScriptで実装されたい場合は下記の記事をご参照ください！

では、解説していきます。

チェックボックスとは

チェックボックスとはフォーム内(問い合わせ、検索等)で複数の項目を選択する際に使用するボックスになります。チェックボックスは下記のように表示されます。

北海道東北関東中部近畿中国四国九州

上記のサンプルには用意していないのですが、表示されているチェックボックスにチェックを入れて、フォーム内の「送信」ボタン等をクリックするとチェックされている値を送信することができます。

本記事では、nameに[]を指定して配列のチェックボックスにしています。それぞれのnameにユニークな名前を指定してclassでグループ化する方法もあります。

全選択・全解除のチェックボックスを設置する

下記がチェックボックスの全選択・全解除のデモになります。

Demo

デモでは、冒頭で紹介したチェックボックスのサンプルに「すべて」のチェックボックスを追加しています。「すべて」をクリックすると、他のチェックボックスにチェックが入ります。また、「すべて」を除いた他の全チェックボックスにチェックが入ると「すべて」にもチェックが入るような処理にしています。解除の場合も同じになります。

スクリプトに関しては、ソース内のコメントに詳細を記載しておりますので、参考にしていただければと思います！

HTML

<form method="post" action="#">
  <label><input id="checkAll" type="checkbox" value="">すべて</label>
  <label><input name="area[]" type="checkbox" value="北海道">北海道</label>
  <label><input name="area[]" type="checkbox" value="東北">東北</label>
  <label><input name="area[]" type="checkbox" value="関東">関東</label>
  <label><input name="area[]" type="checkbox" value="中部">中部</label>
  <label><input name="area[]" type="checkbox" value="近畿">近畿</label>
  <label><input name="area[]" type="checkbox" value="中国">中国</label>
  <label><input name="area[]" type="checkbox" value="四国">四国</label>
  <label><input name="area[]" type="checkbox" value="九州">九州</label>
</form>

JS

$(function(){

  var checkAll = '#checkAll'; //「すべて」のチェックボックスのidを指定
  var checkBox = 'input[name="area[]"]'; //チェックボックスのnameを指定

  $( checkAll ).on('click', function() {
    $( checkBox ).prop('checked', $(this).is(':checked') );
  });

  $( checkBox ).on( 'click', function() {
    var boxCount = $( checkBox ).length; //全チェックボックスの数を取得
    var checked  = $( checkBox + ':checked' ).length; //チェックされているチェックボックスの数を取得
    if( checked === boxCount ) {
      $( checkAll ).prop( 'checked', true );
    } else {
      $( checkAll ).prop( 'checked', false );
    }
  });

});

チェックボックスの全選択・全解除は登録フォーム、アンケートフォーム、エントリーフォームといった様々なところで設置するものになりますので、作り方を覚えておくと今後の制作で役に立つかもしれません！

以上、チェックボックスの全選択・全解除のご紹介でした！