[Javascript] Radio 버튼 value 값 Check

출처 : https://pringles.tistory.com/36

 

질문내용

<form name=form>
<input type="radio" name="comm_stat_flag" value="10">
<input type="radio" name="comm_stat_flag" value="20">
</form>

위와 같이 폼이름은 form 이고 radio 버튼이

이렇게 있는데

전송전에 라디오버튼에 있는 value 값을 check 하려고 하는데

어떻게 라디오 버튼의 벨류 값을 알아내요?

alert(document.form.comm_stat_flag.value)

이렇게 하니 undifind 이렇게 나오네요..

전체적으로 보면 입력항목 중에 Radio button 이 있는데

다른 폼으로 전송하기 전에 자바스크립트에서 check 할 사항을 check 하려고

하는데 자바스크립트 상에서 Radio Button 의 값을 알아낼수가 없네요..

Radio Button 의 Value 값을 알아내는 방법좀 가르쳐 주세요..

 

답변내용

라디오 버튼의 경우 똑같은 이름으로 여러개가 있는 경우 이는 자동으로 배열로 처리됩니다.

따라서 document.form.comm_stat_flag 는 이미 배열로 되어 있는 상태이고 배열.value 라는 것은 없기 때문에 undifind 가 나오게 되는겁니다.

그래서 배열로 접근을 하셔야 하는데 그 방법은 이미 아시겠지만 document.form.comm_stat_flag[0] 이렇게 접근을 하셔야 하고

comm_stat_flag 가 두개가 있기때문에 document.form.comm_stat_flag[1] 까지 유효한 오브젝트가 되는겁니다.

자바스크립트에서 배열의 시작은 0 이기 때문에 2개면 0,1 이렇게 두개가 되는거죠

따라서 document.form.comm_stat_flag[0].value 이렇게 접근을 하셔야 value 값을 참조하실 수 있고, 라이오버튼의 체크여부는 document.form.comm_stat_flag[0].checked 값으로 참조하실 수 있습니다.

예로 라디오 버튼 하나라도 체크했는지 여부를 알아보는 함수를 만들어보겠습니다.

 

<script>
function checkRadioButton(objName){
var radioObj = document.all(objName);
var isChecked;
if(radioObj.length == null){ // 라디오버튼이 같은 name 으로 하나밖에 없다면
isChecked = radioObj.checked;
}else{ // 라디오 버튼이 같은 name 으로 여러개 있다면
for(i=0; i<radioObj.length; i++){
if(radioObj[i].checked){
isChecked = true;
break;
}
}
}

if(isChecked)
alert('체크된거있음');
else
alert('체크된거없음');
}
</script>

<form name=form>
결혼여부 
<input type="radio" name="comm_stat_flag" value="10">기혼
<input type="radio" name="comm_stat_flag" value="20">미혼
<input type=button value="라디오버튼 체크여부확인" onClick="checkRadioButton('comm_stat_flag')">
</form>