jQueryで「全て選択」チェックボックスを実装する

こんにちは、さるまりんです。

今回は「全てを選択」のチェックボックスをjQueryで実装してみます。

こんなのです。

チェックボックス部分のHTMLは↓です。

<table>
  <tr><td><input type="checkbox" id="all_fruits"></td><td>全て選択</td></tr>
  <tr><td><input type="checkbox" name="fruits" value="apple"></td><td>りんご</td></tr>
  <tr><td><input type="checkbox" name="fruits" value="orange"></td><td>オレンジ</td></tr>
  <tr><td><input type="checkbox" name="fruits" value="banana"></td><td>バナナ</td></tr>
  <tr><td><input type="checkbox" name="fruits" value="melon"></td><td>メロン</td></tr>
</table>

まずは「全て選択」をクリックした時の動作をon('click')で実装です。
if (this.checked)でクリックされたチェックボックスがチェックされている状態かをテストして、チェックされていれば、nameがfruitsの個別チェックボックスを全て選択状態に、それ以外の場合は選択解除しています。

// 「全て選択」がクリックされたら
$('#all_fruits').on('click', function() {
  if (this.checked) {
    // チェックされていたら全ての個別チェックボックスを選択状態に
     $('input[name=fruits]').prop('checked', true);
  } else {
    // チェックされていなければ全ての個別チェックボックスを選択解除
    $('input[name=fruits]').prop('checked', false);
  }
});

次は個別のチェックボックスをクリックした時の動作です。
個別のチェックボックスが全て選択された状態の時は「全て選択」も選択状態に、それ以外の時は「全て選択」は選択解除されているようにします。

// 個別のチェックボックスのどれかがクリックされたら
$('input[name=fruits]').on('click', function(){
  if ($('input[name=fruits]:not(:checked)').length == 0) {
    // 全ての個別チェックボックスが選択されている
    $('#all_fruits').prop('checked', true);
  } else {
    // 全ての個別チェックボックスが選択されていない
    $('#all_fruits').prop('checked', false);
  }
});

↑のコードで個別のチェックボックスが全て選択されているかをテストするのに、「個別チェックボックスでチェックされていないものの数が0であるか？」を条件にしています。「チェックされていない」は:not(:checked)で取得しています。

もっと良い実装方法があるかもしれないですね。
改良していけるように勉強します。参考にしてもらえたら嬉しいです。

読んでくださってありがとうございました。

それではまた！