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

• 「全て選択」にチェックすると全ての項目にチェックが付与される
• ひとつでもチェックを外すと、「全て選択」もチェックが外れる
• また、全ての項目にチェックを付与すると「全て選択」がチェックされる

HTML

  <label for="allChecked">
    <input type="checkbox" name="allChecked" id="allChecked" value="1">
    <span>全て選択</span>
  </label>
  <div id="cities">
    <label><input type="checkbox" name="city[]" value="1"  /> 東京</label>
    <label><input type="checkbox" name="city[]" value="2"  /> 大阪</label>
    <label><input type="checkbox" name="city[]" value="3"  /> 名古屋</label>
    <label><input type="checkbox" name="city[]" value="4"  /> 福岡</label>
  </div>

JavaScript

  $(function() {
    // 「全て選択」のチェックボックスの制御
    $('#allChecked').click(function() {
      $("input[name='city[]']").prop('checked', this.checked);
    });

    // センターが選択された場合、「全て選択」を制御する
    $("input[name='city[]']").on('click', function() {
      controlCities();
    });

    function controlCities() {
      if ($('#cities :checked').length == $('#cities :input').length) {
        $('#allChecked').prop('checked', true);
      } else {
        $('#allChecked').prop('checked', false);
      }
    }

    controlCities();
  });

解説

全てのチェックボックスの個数と、チェックが付与されたチェックボックスの個数を比較して判断している