HTML DOM의 Input Radio checked 속성은 type이 radio로 지정된 <input> 요소의 checked 속성과 연관된 기능입니다. 이 속성을 사용하면 라디오 버튼의 선택(checked) 상태 값을 가져오거나 설정할 수 있습니다.
기본 문법(Syntax)
checked 속성을 설정하는 문법은 다음과 같습니다.
radioObject.checked = true|false
true를 할당하면 해당 라디오 버튼이 선택되고, false를 할당하면 선택이 해제됩니다.
예제 코드
라디오 버튼의 checked 속성을 활용한 실제 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Radio checked property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
<input type="radio" name="fruits" id="Apple">Apple
</form>
<br><button type="button" onclick="checkApple()">Check Apple</button>
<script>
function checkApple() {
document.getElementById("Apple").checked = true;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 Mango와 Apple 두 개의 라디오 버튼과 'Check Apple' 버튼이 화면에 표시됩니다.
'Check Apple' 버튼을 클릭하면 Apple 라디오 버튼이 자동으로 선택됩니다.
코드 상세 분석
위 예제가 동작하는 원리를 단계별로 살펴보겠습니다.
1. 라디오 버튼 그룹 생성
폼 안에 두 개의 input 요소가 있으며, 두 요소 모두 type="radio"와 name="fruits"라는 공통 속성을 가집니다. 같은 name 값을 공유하기 때문에 두 버튼은 하나의 그룹으로 묶여 상호 배타적으로 동작합니다. 첫 번째 라디오 버튼의 id는 'Mango', 두 번째는 'Apple'입니다.
<form> FRUIT: <input type="radio" name="fruits" id="Mango">Mango <input type="radio" name="fruits" id="Apple">Apple </form>
2. 버튼 생성 및 이벤트 연결
사용자가 클릭하면 checkApple() 함수를 실행하는 'Check Apple' 버튼을 만들었습니다.
<button type="button" onclick="checkApple()">Check Apple</button>
3. checkApple() 함수 로직
checkApple() 함수는 getElementById() 메서드를 사용해 id가 'Apple'인 라디오 input 요소에 접근한 뒤, 해당 요소의 checked 속성을 true로 설정합니다. 그 결과 Apple 라디오 버튼이 자동으로 체크됩니다.
function checkApple() {
document.getElementById("Apple").checked = true;
}정리
checked 속성은 단순히 true/false 값만 다루지만, 폼 유효성 검사, 초기값 설정, 조건에 따른 자동 선택 등 다양한 시나리오에서 유용하게 활용됩니다. 또한 읽기 전용으로 사용하면 현재 어떤 라디오 버튼이 선택되어 있는지 확인하는 용도로도 쓸 수 있습니다.