jQuery チェックボックスをすべてチェック・すべて解除する

jQueryでチェックボックスをすべてチェック・すべて解除するデモを作成しましたので、ご紹介です。

デモ

早速デモです。

See the Pen dGEEwo by web-dev.xyz (@webdevxyz) on CodePen.

よくある動作なので検索するといくらでもヒットしますが、今回のポイントは下記の3点です。

• すべてチェックすると「すべてチェックする」が「すべて外す」になる。
• 手動ですべてのチェックボックスにチェックを入れると「すべてチェックする」にチェックが入って「すべて外す」になる。
• すべてにチェックが入っている状態から一つチェックを外すと「すべて外す」のチェックが消えて「すべてチェックする」になる

jQuery

下記がjQueryの記述です。

$(function() {
  $('#all').on('click', function() {
    if ($(this).prop('checked')) {
      allCheck('.check');
    } else {
      allRemove('.check');
    }
  });
  $('.check').on('click', function() {
    if ($(".check:not(:checked)").size() == 0) {
      allCheck('#all');
    } else {
      allRemove('#all');
    }
  });
  function allCheck(value) {
    $(value).prop('checked', true);
    $('#all_label').text('すべて外す');
  }
  function allRemove(value) {
    $(value).prop('checked', false);
    $('#all_label').text('すべてチェックする');
  }
});

簡単に説明すると…

  $('#all').on('click', function() {
    if ($(this).prop('checked')) {
      allCheck('.check');
    } else {
      allRemove('.check');
    }
  });

↑「$(‘#all’).on(‘click’, function() {…」で「すべてチェックする」または「すべて外す」をクリックした時の処理を開始して、「if ($(this).prop(‘checked’)) {…」の部分でクリックした後にチェックが入るか、外れるかを判定して処理を振り分けています。

「すべてチェックする」の状態をクリックするとチェックなし→チェックありになるので、チェックが入っている場合の「allCheck(‘.check’)」の関数が実行されます。「すべて外す」の状態をクリックするとチェックあり→チェックなしになるので、チェックが入っていない場合の「allRemove(‘.check’)」の関数が実行されます。

  $('.check').on('click', function() {
    if ($(".check:not(:checked)").size() == 0) {
      allCheck('#all');
    } else {
      allRemove('#all');
    }
  });

↑「$(‘.check’).on(‘click’, function() {…」で「チェック」をクリックした時の処理を開始して、「if ($(“.check:not(:checked)”).size() == 0) {…」の部分で「チェック」のすべてにチェックが入っているか一つでもチェックが入っていないかを判定して処理を振り分けています。

すべてにチェックが入っている場合は「allCheck(‘#all’)」の関数が実行されます。一つでもチェックが入っていない場合は「allRemove(‘#all’)」の関数が実行されます。

  function allCheck(value) {
    $(value).prop('checked', true);
    $('#all_label').text('すべて外す');
  }
  function allRemove(value) {
    $(value).prop('checked', false);
    $('#all_label').text('すべてチェックする');
  }

↑「function allCheck(value) {…」や「function allRemove(value) {…」の「value」には「.check」または「#all」が渡されます。

「function allCheck(value) {…」が実行される場合、「$(value).prop(‘checked’, true);」によってvalue（「.check」または「#all」）にチェックを入れて、「$(‘#all_label’).text(‘すべて外す’);」によって「すべてチェックする」の文字を「すべて外す」に変えます。

「function allRemove(value) {…」が実行される場合、「$(value).prop(‘checked’, false);」によってvalue（「.check」または「#all」）のチェックを外し、「$(‘#all_label’).text(‘すべてチェックする’);」によって「すべて外す」の文字を「すべてチェックする」に変えます。

最後に・・・

システムを作る時なんかによく実装するかと思います。よかったら使ってください。

説明がわかりづらいかなぁと思いますので、質問等あればお気軽にコメントください。