약관동의 체크박스 전체선택, 해제 하기

일반의 경우

 

HTML 마크업

<div class="agreement-container">
	<div class="agreement-allcheck">
    	<input type="checkbox" id="allcheck" class="input-text">
        <label for="allcheck">전체동의</label>
    </div>
    
    <div class="check-group">
    	<input type="checkbox" id="check_01" class="input-text">
        <label for="check_01">선택 01</label>
    </div>
     <div class="check-group">
    	<input type="checkbox" id="check_02" class="input-text">
        <label for="check_02">선택 02</label>
    </div>
     <div class="check-group">
    	<input type="checkbox" id="check_03" class="input-text">
        <label for="check_03">선택 03</label>
    </div>    
</div>

 

 

제이쿼리

 

1. 전체 선택/선택해제

$('#allcheck').on('click', function(){
	var checked = $(this).is(':checked');
    
    if(checked) {
    	$(this).closest('.agreement-container').find('.input-check').prop('checked', true);
    } else {
    	$(this).closest('.agreement-container').find('.input-check').prop('checked', false);
    }
});

 

 

2. 전체선택 후 하나만 해제 했을 때, 전체선택 풀림

$('.agreement-container .input-check').on('click', function(){
	var chkGroup = $(this).closest('.agreement-container').find('.check-group');
	var chkGroup_cnt = chkGroup.length;
    checked_cnt = $('.check-group .input-check:checked').length;
    
    if (checked_cnt < chkGroup_cnt) {
    	$('#allcheck').prop('checked', false);
    } else if (checked_cnt == chkGroup_cnt) {
   		$('#allcheck').prop('checked', true);
    }
});

 

 

 

icheck plugin의 경우

제이쿼리

 

 

1. 전체 선택/선택해제

$('#allcheck').on('ifClicked', function(){
  var checked = $(this).is(':checked');

  if(!checked){
 	 $(this).closest('.agreement-container').find('.input-check').iCheck('check');
  } else {
 	 $(this).closest('.agreement-container').find('.input-check').iCheck('uncheck');
  }

});

 

 

 

2. 전체선택 후 하나만 해제 했을 때, 전체선택 풀림

$('.agreement-container .check-group .input-check').on('ifChanged', function(){
	var chkGroup = $(this).closest('.agreement-container').find('.check-group');
    var chkGroup_cnt = chkGroup.length;
    var checked_cnt = $('.check-group .input-check:checked').length;

	if(checked_cnt < chkGroup_cnt) {
		$('#allcheck').iCheck('uncheck');
	} else if (checked_cnt == chkGroup_cnt){
		$('#allcheck').iCheck('check');
	}
});