思い付くまでタイトル未定

RubyとかRailsとかももクロちゃんとか色々な事書きます。

jQuery 複数チェックボックスの全選択、全部じゃなくなったらチェック外すやつ

jQuery javascript checkbox

全て
というチェックボックスにチェックを入れると、他のチェックボックスにチェックを入れるというやつ、ググると沢山出てきますが、皆なんか仕様がおかしくない！？
と私は思う訳です。（会社の人に言われて気付いただけ）

どういうことか

f:id:kanahebiZ:20151007172718p:plain
　　↓「全て」にチェックを入れる
f:id:kanahebiZ:20151007172720p:plain
　　全てのチェックボックスにチェックが入る
　　ここまでは良いですよね。

　　↓「とんこつ」と「塩」のチェックを外す
f:id:kanahebiZ:20151007172721p:plain

WHY JAPANESE PEOPLE!!
全てのチェックボックスにチェックが入っていないのに、「全て」にチェックが入っているのはおかしいダロウ！！

と思うのです。

f:id:kanahebiZ:20151008100751g:plain
↑この動きが正しいのではないかと思います。

デモあります。

という事で、実装してみます。

環境

jquery-1.11.3

ソース

html

<input type="checkbox" id="category_all" name="category_all">
<label for="category_all">全て</label>
<div id="categories">
  <input type="checkbox" name="category_01" id="category_01" value="01" class="category">
  <label for="category_01">とんこつ</label>
  <input type="checkbox" name="category_02" id="category_02" value="02" class="category">
  <label for="category_02">味噌</label>
  <input type="checkbox" name="category_03" id="category_03" value="03" class="category">
  <label for="category_03">醤油</label>
  <input type="checkbox" name="category_04" id="category_04" value="04" class="category">
  <label for="category_04">塩</label>
  <input type="checkbox" name="category_05" id="category_05" value="05" class="category">
  <label for="category_05">その他</label>
</div>

javascript

$(function() {
  $('#category_all').on('click', function() {
    $('.category').prop('checked', this.checked);
  });

  $('.category').on('click', function() {
    if ($('#categories :checked').length == $('#categories :input').length){
      $('#category_all').prop('checked', 'checked');
    }else{
      $('#category_all').prop('checked', false);
    }
  });
});

ポイント

最後に

全選択・全解除をボタンで実装しているなら問題ないと思いますが、そうでない場合は困りますよね！人によってはバグなんじゃない？ってなりそうです。
気付かない人もいると思いますが、利用場面によっては気付く人が多くなったり、混乱させてしまったりすると思います。
やり方を知っておくだけでもとても勉強になりました。

厚切りジェイソンさんのネタ、勝手に借りました。ごめんなさい、ありがとう！