전체동의 체크박스 (회원가입 약관 등에 쓰임)

See the Pen checkbox all by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<span class="chk chkall">
  <span class="cbx"><input type="checkbox" name="cbx01" id="chkall"><label for="chkall">전체동의</label></span>
</span>

<span class="chk chklist">
   <span class="cbx"><input type="checkbox" name="cbx02" id="term1"><label for="term1">회원 이용약관 동의</label></span>
</span>

<span class="chk chklist">
   <span class="cbx"><input type="checkbox" name="cbx02" id="term2"><label for="term2">회원 이용약관 동의2</label></span>
</span>

 

 

css

/* custom checkbox*/
span.chk {display: block;}
.chk input {opacity: 0;  position: absolute;}
.chk > span {display: inline-block;}
.chk > span label {display: inline-block;position: relative;line-height: 1;cursor: pointer; padding-left:1.2em; }
.chk .cbx label::before {content: '';position: absolute;left: 0;top: 1px;width:15px;height:15px;border: 1px solid #c6c6c6;background: #fff;border-radius: 3px;margin-right: 0;vertical-align: bottom;cursor:pointer;}
.chk .cbx input:checked + label::before {background: #0c76ce; border: 1px solid #0c76ce;}
.chk .cbx input:checked + label::after{content:'';position:absolute;left: 5px;top: 3px;width:5px;height:8px;border-width:0 2px 2px 0;border-style:solid;border-color:#fff;transform:rotate(45deg);}

 

 

javascipt *jquery필요

 

$(function(){
// 전체동의 click
  $('.chkall input').on('click', function() {
    var checked = $(this).is(':checked');
    if (checked) {
      $('.chklist').find('input').prop('checked', true);
    } else {
      $('.chklist').find('input').prop('checked', false);
    }
  });
  
  // 전체동의 외 체크박스 click
  $('.chklist input').on('click', function() {
    var chkGroup = $('.chklist').length;
    var checked_cnt = $('.chklist input:checked').length;
    if (checked_cnt < chkGroup) {
      $('.chkall input').prop('checked', false);
    } else if (checked_cnt == chkGroup) {
      $('.chkall input').prop('checked', true);
    }
  });
})