[javascript] radio 버튼을 이용한 동의, 미동의 확인받기

광고를 집행하는 회사에서 고객의 참여 동의를 받는 것은 중요한 문제다.

광고페이지로 넘어가기전에 개인정보 수집 및 이용 동의에 확인을 받아야한다.

그럴 때 개발자가 동의 / 미동의 체크하는 기능을 추가해줘야한다. 사용한 일부 코드를 살펴보자.

 

1. 먼저 input 박스를 radio 타입으로 설정하고, 동의 / 미동의 각각 1개씩 만든다.

<div class="agree">
  <input type="radio" name="yak" id="yak" value="yes"> 
  <label for="yak"> 개인정보 수집 및 이용 동의 </label><br>
  <input type="radio" name="yak" id="yak_no" value="no"> 
  <label for="yak"> 개인정보 수집 및 이용 미동의 </label>
</div>

 

2. type 을 checkbox 로 하기보다는 radio로 했는데 동의 미동의 둘 중에 1개를 선택해야하기때문이었다.

3. script 코드는 아래와같다.

<script>
function Click(){

  if($("input:radio[name='yak']").is(":checked")==true){ // if 시작
  
      var yak_no = $(":input:radio[name=yak]:checked").val();
      if(yak_no=='no'){
        alert('개인정보 수집 및 이용 미동의 시 참여 불가!');
        return false;
      }
    
  }else{ //else 시작
  
      alert('개인정보 수집 및 이용 동의 시 참여 가능!);
      return false;
    
  }

}
</script>

 

시나리오는 이렇다

1. 첫 번째 if문에서 name=yak 을 가진 radio 에 하나라도 체크가되어있는지 확인한다.

2. radio 에 하나도 체크가 되어있지않으면 알럿창으로 "개인 정보 수집 및 동의 시 참여 가능!" 팝업이 뜬다.

3. 만약 radio에 하나라도 체크가 되어있으면 첫 번째 if 문에서 체크가 이루어진다.

4. 체크한 값이 미동의일 경우 팝업을 띄워야하는데, 미동의 input 박스의 value 값을 추출해서 

만약 미동의에 체크되었다면 "개인정보 수집 및 이용 미동의 시 참여 불가!" 팝업을 띄운다.

 

 

아주 간단한 동의, 미동의 자바스크립트 끝!

 

 

 

 

2020 년 5월 22일 덧붙임

팀 내부에서 제이쿼리에서 ES6 로 변경을 하자는 움직임이 감지되고있고 다들 공부중이다. ES6로 작성한 "동의, 미동의 확인받기"도 추가로 작성해보면 좋을 것 같다.