HTML DOM 라디오 버튼 defaultChecked 속성 완벽 정리: 기본 체크 여부 확인하기

defaultChecked 속성이란?

HTML DOM의 Input Radio defaultChecked 속성은 라디오 버튼(<input type="radio">)이 문서가 로드될 때 기본적으로 체크(checked)된 상태로 설정되어 있는지 확인하는 데 사용됩니다.

이 속성은 불리언(Boolean) 값을 반환합니다.

라디오 버튼에 checked 속성이 지정되어 있으면 → true
지정되어 있지 않으면 → false

주의: defaultChecked는 사용자가 이후에 버튼을 클릭해 선택 상태를 변경하더라도 값이 바뀌지 않습니다. 즉, HTML 소스 코드에 명시된 초기 상태만을 기준으로 판단합니다. 현재 선택 상태를 확인하려면 checked 속성을 사용해야 합니다.

구문(Syntax)

Radio defaultChecked 속성의 기본 구문은 다음과 같습니다.

radioObject.defaultChecked

예제

다음은 Radio defaultChecked 속성을 활용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Radio defaultChecked 속성</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango" checked>Mango
</form>
<br>
<button type="button" onclick="checkDefault()">CHECK</button>
<p id="Sample"></p>
<script>
    function checkDefault() {
        var c = document.getElementById("Mango").defaultChecked;
        document.getElementById("Sample").innerHTML = "버튼의 기본 체크 값은 " + c + " 입니다.";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 화면에 'Mango'라는 라디오 버튼과 CHECK 버튼이 표시됩니다. 라디오 버튼은 checked 속성 덕분에 처음부터 선택된 상태로 나타납니다.

CHECK 버튼을 클릭하면 단락 영역에 다음과 같은 결과가 출력됩니다.

버튼의 기본 체크 값은 true 입니다.

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 라디오 버튼 생성

form 요소 안에 type="radio", name="fruits", id="Mango"로 설정된 input 요소를 생성하고, checked 속성을 추가하여 기본적으로 체크된 상태로 만들었습니다.

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

2. CHECK 버튼 생성

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

<button type="button" onclick="checkDefault()">CHECK</button>

3. checkDefault() 함수 동작

checkDefault() 함수는 getElementById() 메서드를 사용해 id가 "Mango"인 라디오 버튼 요소를 가져온 뒤, defaultChecked 속성 값을 읽어옵니다. 해당 라디오 버튼은 checked 속성이 설정되어 있으므로 true가 반환되며, 이 값은 변수 c에 저장됩니다. 마지막으로 innerHTML 속성을 통해 id가 "Sample"인 단락에 결과가 표시됩니다.

function checkDefault() {
    var c = document.getElementById("Mango").defaultChecked;
    document.getElementById("Sample").innerHTML = "버튼의 기본 체크 값은 " + c + " 입니다.";
}

마무리

defaultChecked 속성은 폼을 초기화하거나 사용자가 변경하기 전의 원래 상태를 기준으로 로직을 처리할 때 유용하게 활용할 수 있습니다. 반면, 현재 선택 상태가 필요하다면 checked 속성을 사용하는 것이 올바른 방법입니다.