[Jquery] 라디오 버튼 동의/미동의 기능 구현 (영상 有)

사이트를 만들다 보면 동의서에 대한 동의/미동의 기능을 구현할 경우가 종종있습니다.

제이쿼리를 통해 제가 알고 있는 두가지 방법을 공유해드리니 도움되셨으면 좋겠습니다.

첫번째는 한개 항목의 라디오 버튼 / 두번째는 다중 항목의 라디오 버튼의 정리 내용 입니다.

전체동의버튼 기능도 추가하였습니다.

 

 

 

 

---

 

 

 

 

첫번째!

 

 

 

 

한개의 항목에 대한 라디오버튼 처리입니다.

 

아래 화면과 같이 하나의 라디오 버튼을 가지고 동의/미동의 기능 구현 입니다.

요약하자면

1. 함수를 부르는 onclick 값에 obj값을 넣어서
2. obj값이 Y 또는 N 일때 if문을 통해 값을 구하는 것입니다.
3. Y일 경우 check가 되어 있다면 form문의 action 주소로 넘어갑니다.

 

최종 완료 화면입니다.

 

 

JSP

 

<div class="tbox">
    <ul>
        <li>내용내용내용</li>
    </ul>
</div>
<input type="radio" name="agreeBtn" id="agreeBtn" value="Y" class="radio" /><span class="ml_10">상기 사항을 준수할 것을 서약합니다.</span>
<div class="w_btn">
    <a href="#" class="blue_btn" onclick="fnConfirm('Y');"><span>다음 단계로</span></a> 
    <a href="#" class="gray_btn" onclick="fnConfirm('N');"><span>동의하지 않습니다.</span></a>
</div>

 

 

JQUERY

 

 

function fnConfirm(obj) {
    if(obj == 'Y') {
        if($("#agreeBtn").is(":checked")) {
            
                $("#agreeForm").submit();
            
        } else {
            alert("상기사항을 확인후 준수 서약에 동의가 필요합니다.");
            return false;
        }
    } else {
        if(confirm("미동의시 서비스 이용이 불가능합니다. 메인화면으로 이동하시겠습니까?")) {
            location.href="${path}/";    
        }
        return false;
    }
}

 

 

 

 

 

 

 

두번째!

 

 

 

다중 항목에 대한 라디오버튼 처리 및 전체동의 부분입니다. 

 

 

두번째는 for문을 통한 기능 구현입니다.

 

1. 변수 radios에 radio값 Y일 적용하고 for문으로 돌면서 Y가 체크가 되어 있지 않으면 경고 메시지메 뜨고,
2. 아니면 form action주소로 넘어가도록 설정해 보았습니다.

 

 

 

 

 

JSP

 

<div id="cont"> 
<form name="inputForm" method="post" onsubmit="return _onSubmit();" action="${path}/account/agree_action.do" >
    
    <div class="chk-wrap right">
        <input type="radio" name="agreeBtn1" id="agreeBtn1" class="vcen1" value="Y" /> <label for="agreeBtn1" class="f17 b">동의함</label>&nbsp;&nbsp;
        <input type="radio" name="agreeBtn1" id="agreeBtn2" class="vcen2" value="N" /> <label for="agreeBtn1" class="f17 b">동의안함</label>
    </div>
 
    
    <div class="chk-wrap right">
        <input type="radio" name="agreeBtn2" id="agreeBtn3" class="vcen3" value="Y" /> <label for="agreeBtn2" class="f17 b">동의함</label>&nbsp;&nbsp;
        <input type="radio" name="agreeBtn2" id="agreeBtn4" class="vcen4" value="N" /> <label for="agreeBtn2" class="f17 b">동의안함</label>
    </div>
    
 
    <div class="chk-wrap">
        <input type="radio" name="agreeBtn3" id="agreeBtn5" class="vcen5" value="Y" /> <label for="agreeBtn3" class="f17 b">동의함</label>&nbsp;&nbsp;
        <input type="radio" name="agreeBtn3" id="agreeBtn6" class="vcen6" value="N" /> <label for="agreeBtn3" class="f17 b">동의안함</label>
    </div>
 
    <div class="chk-wrap t_c">
        <input type="radio" name="agree_all" id="agree_all" class="vcen7" onclick="allcheck('Y')" value="" style="width:20px; height:20px" /> <label for="agree_all" class="f20 b">전체 동의 (모든 약관을 확인하고 전체 동의합니다)</label>
    </div> 
 
<div class="t_c mt_30">
    <input type="submit" class="btn blue border-radius" value="확인"/>
    <a href="${path }/" class="btn black border-radius"><span>취소</span></a>
</form>  
</div>
 

 

라디오 버튼의 특성상 name값은 똑같이 해줘야 중복체크가 되지 않습니다.

 

 

 

 

 

 

JQUERY

 

 

function _onSubmit(){
    
var radios = $(":radio[value='Y']");
 
for(var i = 0; i < radios.length; i++) {
    
  var $this = $(radios[i]);
  
  if(!$this.is(":checked")) {
      
    alert('약관에 동의하지 않을 경우 가입할 수 없습니다.');
    $this.focus();
    return false;
  
  }
}
 
return true;
    
}
 
 
// 전체동의 체크시 동의만 체크, 해제시 전체 해제
function allcheck(val){
    
    var agree_all = val;
    
    if(agree_all == 'Y'){
        $("input:radio[id='agreeBtn1']").prop("checked",true);
        $("input:radio[id='agreeBtn3']").prop("checked",true);
        $("input:radio[id='agreeBtn5']").prop("checked",true);
        $("input:radio[id='agreeBtn2']").prop("checked",false);
        $("input:radio[id='agreeBtn4']").prop("checked",false);
        $("input:radio[id='agreeBtn6']").prop("checked",false);    
    }else{
        $("input:radio[id='agreeBtn1']").prop("checked",false);
        $("input:radio[id='agreeBtn3']").prop("checked",false);
        $("input:radio[id='agreeBtn5']").prop("checked",false);
        $("input:radio[id='agreeBtn2']").prop("checked",false);
        $("input:radio[id='agreeBtn4']").prop("checked",false);
        $("input:radio[id='agreeBtn6']").prop("checked",false);
    }
}
 

전체동의 부분은 아이디를 구분지어 prop 메서드를 통해 설정합니다.