Checkbox 다중 선택 및 체크 값 가져오기

[ 퀴즈 별 문제의 답이 다중일 경우 처리 ]

 

<c:forEach items="${resultList}" var="resultInfo" varStatus="status">
    <tr>
        <!-- 번호 -->
        <td class="lt_text3">${(searchVO.pageIndex-1) * searchVO.pageUnit + status.count}</td>
        <!-- 항목내용  -->
        <td class="lt_text3L">
            <a href="<c:url value='/adm/qim/QustnrItemManageDetail.do'/>?qustnrIemId=${resultInfo.qustnrIemId}"
               onClick="fn_egov_detail_QustnrItemManage('<c:out value="${resultInfo.qustnrIemId}"/>');return false;"><c:out
                    value='${resultInfo.iemCn}'/></a>
        </td>
        <!-- 정답 여부 -->
        <td>
           <input name="chAnswerCn" id="answerCn<c:out value="${status.count}"/>" title="checkField <c:out value="${status.count}"/>" type="checkbox" 
                value="${resultInfo.iemCn}" <c:if test="${answerList.answerCn.contains(resultInfo.iemCn) eq true }">checked</c:if> 
                onClick="fn_egov_check_answerCn(this,${answerList.mxmmChoiseCo});"/>
         </td>
        <!-- 등록자  -->
        <td class="lt_text3">${resultInfo.frstRegisterNm}</td>
        <!-- 등록일자  -->
        <td class="lt_text3">${fn:substring(resultInfo.frstRegisterPnttm, 0, 10)}</td>
    </tr>
</c:forEach>

문제에 대한 답변들을 forEach문으로 나열한다. → ${resultList}

 

이와 별개로 문제에 정보 리스트에서 정답을 가져와 → ${answerLisrt.answerCn}

나열한 답변과 비교하여 정답일 경우 체크박스를 체크한다.

 

이때 데이터는 다중정답을 ,(콤마)로 구분해 저장되어 있기 때문에 → 1-1,1-2

contains 함수를 사용해 다중 정답들을 모두 체크하게 끔 한다.

→ ${answerList.answerCn.contains(resultInfo.iemCn) eq true }

 

체크박스가 선택되었을 때 해당 체크박스와  문제에 정보 리스트에서 정답갯수를 인자로 넘겨 → ${answerList.mxmmChoiseCo}

fn_egov_check_answerCn() 함수를 실행시킨다.

 

/* ********************************************************
  * 정답 최대 건수 제한 및 정답 변경
  ******************************************************** */
 function fn_egov_check_answerCn(field, count) {
     if($("input:checked[type='checkbox']").length > count) {
         alert("<spring:message code='comUssOlpQim.regist.mxmmChoiseCo' /> ["
                + count
                + "]<spring:message code='comUssOlpQim.regist.exceed' />");
         field.checked = false;
     } 	 

     var answer = null;
     $("input:checked[type='checkbox']").each(function() {
         if(answer == null) {
             answer = $(this).val();
         }else {
             answer += ","
             answer += $(this).val();
         }
     })

     document.listForm.answerCn.value = answer;
 }

comUssOlpQim.regist.mxmmChoiseCo=최대선택건수
comUssOlpQim.regist.exceed=건을 초과하였습니다!

해당 체크박스의 선택 된 수가 문제에 정보 리스트에 정답갯수를 넘으면

alert 메세지를 출력하고 해당 체크박스는 체크를 해제한다.

 

그렇지 않을 경우 빈 함수 answer를 선언하여 each문으로 ,(콤마)와 함께

체크 된 값들은 함수에 넣어준다.

 

최종적으로 이를 hidden으로 숨겨둔 answerCn에 넣고 submit으로

변경 된 정답 값을 저장한다.