자바스크립트 - checkbox, radio 에서 정보 읽어 올 때 주의사항

checkbox, radio 에서 정보 읽어 올 때 주의사항

checkbox 와 radio 에서 정보를 읽어 올때 

복수의 checkbox 또는 복수의 radio 에서 정보를 읽을 때는 배열로 인식하기 때문에 아래 예제와 같이 for문을 만들어 정보를 처리하지만 단수의  checkbox 또는 단수의 radio 에서 정보를 읽을 때는 배열로 인식하지 않고 객체로만 인식하기 때문에 아래 예제처럼 객체의 프로퍼티를 직접 호출해야 함

 

<script type="text/javascript">

window.onload = function(){

var button = document.getElementById('button');

button.onclick=function(){

var form = document.myForm;

// 복수의 체크박스로부터 정보를 읽어올때는 배열로 인식

for(var i=0;i<form.season.length;i++){

if(form.season[i].checked){

alert(form.season[i].value+' 선택');

}

}

// 단수의 체크박스로부터 정보를 읽어올때는 객체로 인식

if(form.lesson.checked){

alert(form.lesson.value+' 선택');

}

};

};

 //jquery를 사용할 경우는 복수와 단수 구분없이 배열로 처리 가능

//===============================================================

$(document).ready(function(){

$('#button').click(function(){

$('input[name=season]').each(function(index,item){

if($(item).is(':checked')){

alert($(item).val() + ' 선택');

}

});

$('input[name=lesson]').each(function(index,item){

if($(item).is(':checked')){

alert($(item).val() + ' 선택');

}

});

});

});

//================================================================

</script>

<form name="myForm">

<input type="checkbox" name="season" value="봄">봄

<input type="checkbox" name="season" value="여름">여름

<br>

<input type="checkbox" name="lesson" value="국어">국어

<br>

<input type="button" value="확인" id="button">

</form>