JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<label for="inpChk">
  <a href="">이용 약관</a>에 동의합니다.
</label>
<input id="inpChk" type="checkbox">

<span class="msg">
!동의가 필요 합니다.!
</span>

CSS

body{background:#000}
label{color:#ccc}
label a{color:#fff}
.msg{color:orange;}

JavaScript

$('label').on('click', function(event){
  var isChecked = $('#inpChk').prop('checked');
  var $msgEle = $('.msg');
  var msg = '';
  
  console.log(event.cancelable);
  
  if(!isBubbleing) {
    if(isChecked) {
      msg = '!동의가 필요 합니다.!';
    }else{
      msg = '동의하였습니다.';
    }
    $msgEle.text(msg);
  }
  // 기본행동 차단
  event.preventDefault();
  
});

$('a').on('click', function(event){
	alert('이용약관이 출력되야 함미다.');
  
  console.log(event.cancelable);
  // a태그의 기본이벤트 차단
  event.preventDefault();
})

$('.msg').on('click', function(event){
  console.log(event.cancelable);
})