2018/04/21

全てチェックするチェックボックス

全ての項目をチェックするチェックボックスです。
チェックが１つでも外れたら、全てチェックするチェックボックスもチェックが外れます。

See the Pen 全てチェックするチェックボックス by nekuta (@nekuta) on CodePen.

チェックした時に全ての項目をチェックする

  $('.all-ck input[type="checkbox"]').on('click', function() {
    var tgt = $(this).parent().next().find('input[type="checkbox"]');
    tgt.prop('checked', this.checked);
  });

.all-ckのinputをクリックした時に.ck-list以下のinputをチェックします。
parent()は親要素、next()はその要素の兄弟要素を見に行く。

チェックが１つでも外れたら、全てチェックするチェックボックスもチェックを外す

  var ckBox = $('.ck-list input[type="checkbox"]');
  ckBox.on('click', function() {
    var ckThisCk = $(this).parent().parent().find('input[type="checkbox"]:checked');
    var ckThisDef = $(this).parent().parent().find('input[type="checkbox"]');
    var allCk = $(this).parent().parent().prev().find('input[type="checkbox"]');
    if ($(ckThisCk).length == $(ckThisDef).length) {
      allCk.prop('checked', 'checked');
    } else {
      allCk.prop('checked', false);
    }
  });

.ck-list以下のinputがクリックされた時、.ck-list以下のinputの個数と、checked状態の個数を見て、個数が同じならall-ckのinputにチェックを入れ、異なる場合はチェックを外す。