JavaScript - CheckBox 전체 선택/해제

예전에 작업했던 내용들을 기억/기록하기 위해 남기는 포스팅입니다. 

 

체크박스 전체 선택/해제 + 하부 선택에 따른 전체 선택 체크박스 활성/비활성 기능 

 

JavaScript 코드

$(function(){

  //기존 선택된 데이터 받아온다면 설정 
  setCheckAll();

  //전체 체크박스 선택 시 
  $('#checkbox_all').on('change', function () {
  $(this).parents('.list_agree').find('input:checkbox').prop('checked', $(this).prop('checked'));
  });

  //전체 외 체크박스 선택 시
  $('.list_agree').find('input:checkbox').not('#checkbox_all').on('change', function () {
  setCheckAll();
  });
});

//체크된 개수에 따라 전체 체크박스 활성/비활성 
function setCheckAll() {
  var checkTotal = $('.list_agree').find('input:checkbox').not('#checkbox_all').length;
  var checkCount = 0;
  $('.list_agree').find('input:checkbox').not('#checkbox_all').each(function () {
    if ($(this).prop('checked')) {
      checkCount++;
    }
  });

  $('#checkbox_all').prop('checked', checkTotal == checkCount);
}

 

Html 코드

<div class="list list_agree">
  <dl>
    <dt>
      <span>마케팅 수신 동의</span>
    </dt>
    <dd class="checkbox_all">
      <div class="checkbox_type3">
        <input type="checkbox" id="checkbox_all">
        <label for="checkbox_all"><span></span>전체</label>
      </div>
    </dd>
    <dd>
      <div class="checkbox_type3">
        <input type="checkbox" id="checkbox_email" class="checkbox_email">
        <label for="checkbox_email"><span></span>이메일</label>
      </div>
    </dd>
    <dd>
      <div class="checkbox_type3">
        <input type="checkbox" id="checkbox_sms">
        <label for="checkbox_sms"><span></span>SMS</label>
      </div>
    </dd>
    <dd>
      <div class="checkbox_type3">
        <input type="checkbox" id="checkbox_phone">
        <label for="checkbox_phone"><span></span>전화</label>
      </div>
    </dd>
  </dl>
</div>            

 

결과 화면

결과 화면

 

JSFiddle에서 확인하기 [새창]