HTML DOM 라디오 버튼 value 속성 완벽 정리

HTML DOM 라디오 버튼 value 속성이란?

HTML DOM의 라디오 버튼 value 속성은 type="radio"로 지정된 input 요소의 value 속성과 연관된 기능입니다. 이 속성을 활용하면 라디오 버튼의 value 속성값을 읽어오거나, 반대로 새로운 값을 설정할 수 있습니다.

라디오 버튼의 value 속성값은 화면에 직접 표시되지 않기 때문에 웹사이트의 사용자 인터페이스(UI)에는 아무런 영향을 주지 않습니다. 하지만 폼(form)이 제출될 때 같은 그룹에 속한 여러 라디오 버튼을 서로 구분하는 중요한 역할을 합니다.

문법(Syntax)

value 속성을 설정하는 기본 문법은 다음과 같습니다.

radioObject.value = text;

여기서 text는 해당 라디오 버튼에 지정하고자 하는 값을 의미합니다.

예제(Example)

라디오 버튼 value 속성의 실제 동작을 확인할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input radio Value property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="BTN1" value="Mango">Mango
<br>
</form>
<p>아래 버튼을 클릭하면 위 요소의 값을 확인할 수 있습니다.</p>
<button type="button" onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("BTN1").value;
        document.getElementById("Sample").innerHTML = "라디오 버튼의 값 : " + t;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM 라디오 버튼 value 속성 완벽 정리 – 개념부터 예제까지

"Get Value" 버튼을 클릭하면 아래와 같이 라디오 버튼의 값이 출력됩니다.

HTML DOM 라디오 버튼 value 속성 완벽 정리 – 개념부터 예제까지

코드 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 라디오 버튼 생성

먼저 form 태그 안에 type="radio", name="fruits", id="BTN1", value="Mango"로 지정된 input 요소를 생성했습니다.

<form>
FRUIT:
<input type="radio" name="fruits" id="BTN1" value="Mango">Mango
</form>

2. 버튼 생성

다음으로, 사용자가 클릭하면 getValue() 함수를 호출하는 버튼을 만들었습니다.

<button type="button" onclick="getValue()">Get Value</button>

3. getValue() 함수의 동작 방식

getValue() 메서드는 getElementById() 메서드를 통해 input 요소를 가져온 뒤, 해당 요소의 value 속성값을 변수 t에 할당합니다. 만약 라디오 버튼에 value 속성이 지정되어 있지 않다면 빈 문자열("")이 반환됩니다. 마지막으로 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 결과값을 출력합니다.

function getValue() {
    var t = document.getElementById("BTN1").value;
    document.getElementById("Sample").innerHTML = "라디오 버튼의 값 : " + t;
}

정리

라디오 버튼의 value 속성은 화면에는 보이지 않지만, 폼 제출 시 어떤 옵션이 선택되었는지 서버에 전달하는 핵심 데이터입니다. JavaScript의 value 속성을 활용하면 선택된 값을 손쉽게 읽거나 동적으로 변경할 수 있으므로, 폼 유효성 검사나 사용자 입력 처리에 유용하게 활용할 수 있습니다.