DOM input radio 객체

 

<input>태그의 type 속성이 radio 인 라디오 객체를 핸들링 하기 위한 방법을 제공합니다.

 

<input type="radio" name="exam" id="exam" value="test"/>테스트

라디오 객체는 하나만 선택이 가능한 객체입니다. 따라서 여러 개의 라디오가 연결되어 사용될 때 라디오 객체를 다루는 방법입니다.

 

1. 라디오 버튼 체크 여부를 알아보기

<input type="radio" name="exam" id="exam" value="test"/>

document.getElementById("exam").checked  //checked 속성으로 체크여부를 파악합니다. 결과는 true, false 형태로 반환됩니다.

이 때 문제는 라디오 버튼은 단독으로 쓰는 경우도 있지만 여러 개의 라디오 버튼이 모여 있는 경우도 있습니다.

 

2. 여러 개의 라디오 버튼이 있는 경우 체크 여부를 확인해 보기

아이디 속성을 이용하여 확인하는 방법

<input type="radio" name="exam" id="exam0" value="test"/>

<input type="radio" name="exam" id="exam1" value="test1"/>

<input type="radio" name="exam" id="exam2" value="test2"/>

for ( i = 0 ; i < 3 ; i++ )

{

    if ( document.getElementById("exam"+i).checked )

    {

        var value = document.getElementById("exam"+i).value;

    }

}

 

라디오 객체를 직접 접근하여 확인하는 방법

<form>

<input type="radio" name="exam" value="a"/>A

<input type="radio" name="exam" value="b"/>B

<input type="radio" name="exam" value="c"/>C

</form>

<script type="text/javascript">

function radioCheck()

{

    var radio = document.forms[0].exam;

    var txt = "";

   

    for ( i = 0 ; i < radio.length; i++ ) {

        if ( radio[i].checked) { txt += radio[i].value; }

    }

    alert(txt);

}

</script>