반응형

개발을 하다보면 multi radio button에 대한 유효성 검증 로직을 사용할 경우가 있다. 

특히 설문지 형태에 동적인 페이지에 대하여 선택값 검증을 할 경우가 종종 있던거 같아 작성해 본다. 
jQuery each를 이용하여 3번에 for문이 돌아간다. 
 1 - Question 문항 
 2 - Question 문항 안에 소단위 문항 
 3 - radio button 목록 

-Evaluation.aspx
<script>
    $J(function() {
        document.location.href = '#show';
        $J('input:radio').addClass("vm");
        var chkVal;
        //등록
        $J("#btnReg").click(function() {
            var chkLen = 0;
            var chkLen2 = 0;

            $J("[id='tableExample']").each(function(i) {
                chkVal = "N";
                chkLen2 = 0;
                $J(this).find("#trExample").each(function(j) {
                    chkVal = "N";
                    $J(this).find("input:radio").each(function() {
                        if ($J(this).is(":checked") == true) {
                            chkVal = "V";
                        }
                    });

                    if (chkVal != "V") {
                        alert((i + 1) + "번 문항의 " + (j + 1) + "번째 직원의 답변을 선택해주세요");
                        $J(this).find("input:radio")[0].focus();
                        return false;
                    } else if (chkVal == "V") {
                        chkLen2++;
                    }
                });

                if ($J(this).find("#trExample").length == chkLen2) {
                    chkLen++;
                } else {
                    return false;
                }
            });
     });
});
</script>
html 영역 
Question No를 기준으로 for문이 돌고, 중첩으로 소문항 단위로 for문이 호출되는 구조 
-Question.aspx
<asp:Repeater ID="rptQuestionList" runat="server" OnItemDataBound="rptQuestionList_OnItemDataBound">
   <table id="tableExample">
      <asp:Repeater ID="rptAnswerList" runat="server" OnItemDataBound="rptAnswerList_OnItemDataBound">
        <tr id="trExample">
           <input type="radio" class="vm" id="rdoExample1">
           <input type="radio" class="vm" id="rdoExample2">
           <input type="radio" class="vm" id="rdoExample3">
       </tr>
     </asp:Repeater>
   </table>
</asp:Repeater>


반응형

'Programming > Frontend' 카테고리의 다른 글

[jQuery] loadingbar plugin  (0) 2014.09.19
jquery ajax method 정리  (0) 2014.03.12
[ajax] JSONP CROSS SITE 응답 받기  (0) 2014.02.12
jQuery에서 부모창 제어/접근(opener, parent)  (0) 2014.02.11
jquery hover 효과  (0) 2013.12.20

+ Recent posts