input element 중에서 radio type의 이벤트 처리 함수 예제입니다.
우선 3개의 radio element를 클릭하였을 때 해당 element의 값을 출력하는 evRdTest() 함수와
확인 버튼을 눌렀을 때 현재 선택되어 진 radio element의 값을 출력하는 evBtOk() 함수입니다.
단순하게 form을 통해 모든 내용을 입력 받은 후 값만을 확인할 경우에는 evBtOk() 함수에서 사용하는 방식을 이용하면 되고
radio element를 클릭할 때마다 화면상이나 변수의 변화가 필요할 경우에는 evRdTest() 함수를 이용하면 된다고 생각합니다.
우선 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 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 |
