소규모 쇼핑몰 프로젝트 5 - 약관 동의 페이지

약관 동의 페이지 총 작업 사진

약관 동의 페이지에서 고려한 바는,

(1) 필수로 표시된 체크 박스가 두 개 전부 체크가 되어야 다음 단계로 넘어갈 수 있다.

(2) 모두 동의한다는 체크 박스를 누를 시 전부 체크 표시된다.

(3) 만약 필수 표시에 하나라도 체크 해제 되면, 모두 동의한다는 체크 박스에도 해제된다.

(4) 필수 동의에 직접 두 개 모두 표시해도, 모두 동의합니다 체크 박스에도 표시된다.

 

해당 것들은 모두 Form 에서 자바 스크립트로 처리했다.

  <form id="terms_form" class="terms_form" action="${ctxpath}/member/joinAgreePro.do">
   <div class="checkbox_group">
			<h3 style="text-decoration: underline;"> 
				 <center> 이용 약관, 개인 정보 수집 및 이용에 모두 동의합니다.
                		 <input type="checkbox" name="selectall" id="chckedAll"  
               		 	 onclick='selectAll(this)'> 
			</h3>

			<h3>
				감귤농장 이용 약관 동의(필수)&nbsp;
             	 		  <input type="checkbox"  name="chkedlist" id="chkedparam1" 
             		 	  onclick='checkSelectAll()'>
			</h3>

		<div class="terms_box">
				<b>여러분을 환영합니다.</b>
			</div>

			<h3>
				<label for="check_2">개인정보 수집 및 이용 동의(필수)</label>&nbsp;
               			 <input type="checkbox"  name="chkedlist" id="chkedparam2" 
              			  onclick='checkSelectAll()'>
			</h3>
	
		<div class="terms_box">
				개인정보보호법에 따라 감귤 농장에 회원가입 신청하시는 분께 
               		 	수집하는 개인정보의 항목, 개인정보의 수집 및 이용목적,
			</div>
			<br>
			<input type="button" id="nextBtn" value="다음 단계로"/>
			<br>
</div>
</form>

여기에서 주목해야 할 것들은, 우선 폼 이름을 주목해야 한다. 폼 이름은 terms_form 으로 설정해 두었다.

그리고 모두 약관 동의 체크 박스 name 은 "selectall" 로, id는 "chckedAll" 로 설정했다. 

각자 체크 박스의 name 은 똑같이 설정했고, id 는 param 1, 2의 숫자로 구분하였다.

 

우선 첫 번째 사항에서 고려했었던 <두 가지 사항이 모두 체크가 되어야 넘어갈 수 있다>의 구현 방법이다.

<script>
$(document).ready(function(){

    $("#nextBtn").click(function(){    
        if($("#chkedparam1").is(":checked") == false){
            alert("모든 약관에 동의 하셔야 다음 단계로 진행 가능합니다.");
            return;
        }else if($("#chkedparam2").is(":checked") == false){
            alert("모든 약관에 동의 하셔야 다음 단계로 진행 가능합니다.");
            return;
        }else{
            $("#terms_form").submit();
        }
    });    
});
</script>

체크 박스 id 로 설정해 둔 param 1, param 2 들이 하나라도 false일 경우, 알람이 뜨며 다음 단계로 넘어가지 못하도록 처리했다. 그러나 둘 모두 체크가 된 경우를 else 로 따로 처리하여 submit 되도록 했다.

서브밋 된 후 member/joinAgreePro.do 에서는 바로 리다이렉트로 회원가입 form 으로 이동하도록 처리해 두었다.

 

다음은 두 번째 사항에서 고려했었던 <모두 동의한다는 체크 박스를 표시했을 시 모두 체크된다> 이다.

function selectAll(selectAll)  {
	  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
	  
	  checkboxes.forEach((checkbox) => {
	    checkbox.checked = selectAll.checked
	  })
	}

모든 input checkbox 타입에 체크가 될 수 있도록 처리했다.

 

다음은 세 번째, 네 번째 사항에서 고려했었던 상황이다.

(1) 만약 필수 표시에 하나라도 체크 해제 되면, 모두 동의한다는 체크 박스에도 해제된다.

(2) 필수 동의에 직접 두 개 모두 표시해도, 모두 동의합니다 체크 박스에도 표시된다.

function checkSelectAll()  {
	  // 전체 체크박스
	  const checkboxes 
	    = document.querySelectorAll('input[name="chkedlist"]');
	  // 선택된 체크박스
	  const checked 
	    = document.querySelectorAll('input[name="chkedlist"]:checked');
	  // select all 체크박스
	  const selectAll 
	    = document.querySelector('input[name="selectall"]');
	  
	  if(checkboxes.length === checked.length)  {
	    selectAll.checked = true;
	  }else {
	    selectAll.checked = false;
	  }
	}

사실 이 form 에서 다음 회원가입을 할 때 넘기는 데이터는 없어서, 자바스크립트로만 전부 처리할 수 있었다.

이것으로 회원 약관에 필요한 스크립트는 완료!