radio 버튼 사용시 선택 정보 자바스크립트로 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>radio 버튼 테스트</title>
<script type="text/javascript">
window.onload=function(){
//1. radio 버튼 개별적으로 이벤트 체크
var mform = document.getElementById('mform');
for(var i=0; i<mform.country.length;i++){
mform.country[i].onclick=function(){
//this는 이벤트가 발생한 객체
alert(this.value);
};
}
//2. radio 버튼 선택 후 선택한 radio 버튼의 index 및 value 출력
var btn = document.getElementById('btn');
//버튼 클릭시 함수 호출
btn.onclick=function(){
var xform = document.getElementById('xform');
for(var i=0; i<xform.country.length;i++){
if(xform.country[i].checked == true){
alert(i+"번째의 "+xform.country[i].value + " 선택");
}
}
};
};
</script>
</head>
<body>
1. radio 버튼 개별적으로 이벤트 체크 <br>
<form id="mform">
<input type="radio" name="country" value="Korea">대한민국
<input type="radio" name="country" value="USA">미국
<input type="radio" name="country" value="China">중국
</form>
2. radio 버튼 선택 후 선택한 radio 버튼의 index 및 value 출력 <br>
<form id="xform">
<input type="radio" name="country" value="Korea">대한민국
<input type="radio" name="country" value="USA">미국
<input type="radio" name="country" value="China">중국
<input type="button" value="확인" id="btn">
</form>
</body>
</html>
'javaScript&jQuery' 카테고리의 다른 글
| checkbox, radio 에서 정보 읽어 올 때 주의사항 (0) | 2016.07.20 |
|---|---|
| 자바스크립트 - json2.js 파일을 이용한 json 객체 생성 (0) | 2016.07.20 |
| 자바스크립트 - json 형식의 텍스트 데이터를 객체로 생성하기 (0) | 2016.07.20 |
| 자바스크립트 js 파일 압축하기 (0) | 2016.07.20 |
| select 선택시 사이트 이동하는 자바스크립트 (0) | 2016.07.20 |