JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

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

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

CSS

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

JavaScript

$('label').on('click', function(){
  var isChecked = $('#inpChk').prop('checked');
  var $msgEle = $('.msg');
  var msg = '';
  
  if(isChecked) {
  	msg = '!동의가 필요 합니다.!';
  }else{
  	msg = '동의하였습니다.';
  }
  $msgEle.text(msg);
});

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