[#JavaScript] 버튼 전체 동의 체크박스, 체크 및 체크 해제

 

 

 

 

 

각각의 체크박스 선택 시 체크, 체크 해제

그리고 전체 동의 버튼 클릭 시 전체 체크, 전체 체크 해제

 

 

 

 

 

<div class="agree-wrap">
   <input type="checkbox" id="chk-all" />
   <span>약관에 모두 동의합니다.</span>
</div>
 <div class="chk-wrap">
   <input type="checkbox" class="chk" id="chk1"/>
   <span class="check-msg chk1">이용약관 동의 [필수]</span>
   <span class="terms-detatil">보기</span>
</div>
<div class="chk-wrap">
   <input type="checkbox" class="chk" id="chk2"/>
   <span class="check-msg chk2">마케팅 약관 동의 [필수]</span>
   <span class="terms-detatil">보기</span>
</div>

 

 

 

 

 

  $("#chk-all").click( function() {
    var checkedVal = $(".chk").prop("checked");

    $(".chk").prop("checked", this.checked);
    if($("#chk-all").prop("checked") == true) {
      $(".check-msg").css("color", "#43494f");
    } else {
      $(".check-msg").css("color", "#b0b5c1");
    }
  });

  $(".chk").on("click", function() {
    var checked = $(this).attr('id');
    var checkedColor = $(`.${checked}`).css("color");

    if(checkedColor == 'rgb(176, 181, 193)') {
      $(`.${checked}`).css("color", "#43494f");
    } else {
      $(`.${checked}`).css("color", "#b0b5c1");
    }

  });