동의 체크박스 레이어

급하게 만들어서 사용할때 유용하게 씀.

jQuery를 사용할때 checkbox의 선택값을 가지고 올때 attr 과 prop가 있는데

attr 은 html의 속성값을 가지고 온다고 생각하면 되고 ex) checked
prop는 javascript의 프로퍼티 값을 가지고 온다고 생각하면 된다. ex) true/false

<div class="checkArea">
  <p><label for="agree01">동의</label><input type="checkbox" id="agree01" name="" /></p>
  <div class="agBox">
     agBox
     <p class="agBoxClose"><a href="javascript:void(0)">닫기</a></p>
  </div>
</div>

<stye>
.checkArea .agBox{display:none;padding:10px;border:1px solid red;}
.checkArea.current .agBox{display:block;}
</stye>

<script>
$(function(){
$(".checkArea input:checkbox").click(function(){
  if($(this).prop("checked")){
      $(this).parents(".checkArea").addClass("current");
    }else{
      $(this).parents(".checkArea").removeClass("current");
    }
  });
  $(".agBoxClose a").click(function(){
    $(this).parents(".checkArea").removeClass("current");
  });
});
</script>

https://jsfiddle.net/aoiyuki4u/quxucq24/