I/T/JavaScript2010.06.03 10:23
input element 중에서 radio type의 이벤트 처리 함수 예제입니다.

우선 3개의 radio element를 클릭하였을 때 해당 element의 값을 출력하는 evRdTest() 함수와
확인 버튼을 눌렀을 때 현재 선택되어 진 radio element의 값을 출력하는 evBtOk() 함수입니다.

단순하게 form을 통해 모든 내용을 입력 받은 후 값만을 확인할 경우에는 evBtOk() 함수에서 사용하는 방식을 이용하면 되고
radio element를 클릭할 때마다 화면상이나 변수의 변화가 필요할 경우에는 evRdTest() 함수를 이용하면 된다고 생각합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
		<title>Radio Element</title>
		<script type="text/javascript">
			function evRdTest(element) {
				alert(element.value);
			}

			function evBtOk() {
				var rd_test = document.getElementsByName("rd_test");
				var value;

				for(var i=0 ; i<rd_test.length ; i++) {
					if(rd_test[i].checked) {
						value = rd_test[i].value;
						break;
					}
				}
				alert(value);
			}
		</script>
	</head>
	<body>
		<input name="rd_test" type="radio" value="1" onclick="evRdTest(this);" checked="true" />1
		<input name="rd_test" type="radio" value="2" onclick="evRdTest(this);" />2
		<input name="rd_test" type="radio" value="3" onclick="evRdTest(this);" />3
		<input id="bt_ok" type="button" value="확인" onclick="evBtOk();" />
	</body>
</html>

'I/T > JavaScript' 카테고리의 다른 글

JavaScript Input(Radio) Element  (0) 2010.06.03
Javascript escape&unescape  (0) 2009.09.24
Javascript Array 사용법  (0) 2009.09.24
Javascript switch문 사용법  (0) 2009.06.16
Javascript if문 사용법  (0) 2009.06.16
Javascript for문 사용법  (0) 2009.06.16
Posted by 황타

티스토리 툴바