라디오박스 체크/선택시 합계 게산 > jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style type="text/css">
input[type="radio"] {cursor:pointer;} /* 라디오박스 커서, 손모양 */
</style>
<script type="text/javascript">
<!--
$(function() { // 페이지 로드시
	// 라디오 클릭시 (q_21 ~ q_25)
	$("input[name='q_21'], input[name='q_22'], input[name='q_23'], input[name='q_24'], input[name='q_25']").change(function() {
		var selectNum = $(this).attr("name").split("_")[1]; // 선택한 박스의 끝 숫자 (21 ~ 25)
		var sum = 0; // 합계 초기값
		/********************************************************************************
		* 지금 선택하기 전 박스까지만 먼저 계산 (다 선택 후, 중간 박스 값이 커지면 그 이후 선택값이 해제되는 문제 처리를 위해)
		********************************************************************************/
		for (i=21; i<26; i++) { // q_21 ~ q_25 반복
			if (i != selectNum) { // 지금 선택한 박스가 아니라면
				if ($("input[name='q_"+i+"']:checked").val() == undefined) { // 체크되지 않았다면
					sum += 0; // 0으로 설정
				}
				else { // 체크되었다면
					sum += parseInt($("input[name='q_"+i+"']:checked").val()); // 해당 라디오의 체크된 값
				}
			} // 지금 선택한 박스가 아니라면
		}
		/********************************************************************************
		* 지금 선택한 박스 계산
		********************************************************************************/
		sum += parseInt($(this).val()); // 기존값 + 현재 선택값
		if (sum > 100) { // 기존 선택값과 현재 선택값 합이 100 보다 크다면
			sum -= parseInt($(this).val()); // 더한 값을 다시 빼줌 (하단 span 에 출력하기 위함)
			$(this).attr("checked", false); // 체크 해제
			alert("총합이 100% 넘지않도록 응답하여 주십시요.");
		}
		$("#result").html(sum + "%"); // 합계값 출력
	});
});
//-->
</script>

<table class="ui cell table">
	<tbody>
		<tr>
			<td style="text-align: center;">%</td>
			<td>0</td>
			<td>5</td>
			<td>10</td>
			<td>20</td>
			<td>25</td>
			<td>50</td>
			<td>75</td>
			<td>90</td>
			<td>100</td>
		</tr>
		<tr>
			<td>① 요추 퇴행성 질환</td>
			<td><input type="radio" name="q_21" class="sel_1" value="0"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="5"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="10"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="20"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="25"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="50"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="75"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="90"/></td>
			<td><input type="radio" name="q_21" class="sel_1" value="100"/></td>
		</tr>
		<tr>
			<td>② 경추 퇴행성 질환</td>
			<td><input type="radio" name="q_22" class="sel_1" value="0"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="5"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="10"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="20"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="25"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="50"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="75"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="90"/></td>
			<td><input type="radio" name="q_22" class="sel_1" value="100"/></td>
		</tr>
		<tr>
			<td>③ 척추 외상</td>
			<td><input type="radio" name="q_23" class="sel_1" value="0"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="5"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="10"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="20"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="25"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="50"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="75"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="90"/></td>
			<td><input type="radio" name="q_23" class="sel_1" value="100"/></td>
		</tr>
		<tr>
			<td>④ 척추 종양</td>
			<td><input type="radio" name="q_24" class="sel_1" value="0"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="5"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="10"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="20"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="25"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="50"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="75"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="90"/></td>
			<td><input type="radio" name="q_24" class="sel_1" value="100"/></td>
		</tr>
		<tr>
			<td>⑤ 척추 변형</td>
			<td><input type="radio" name="q_25" class="sel_1" value="0"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="5"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="10"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="20"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="25"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="50"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="75"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="90"/></td>
			<td><input type="radio" name="q_25" class="sel_1" value="100"/></td>
		</tr>
		<tr>
			<td style="text-align: center;">총　합</td>
			<td colspan="9"><span id="result">0%</span> / 100%</td>
		</tr>
	</tbody>
</table>