HTML DOM의 Input Radio 객체는 type 속성이 "radio"로 지정된 <input> 요소와 연관된 객체입니다. 자바스크립트에서는 createElement() 메서드를 사용하여 라디오 버튼을 동적으로 생성할 수 있고, 이미 존재하는 라디오 버튼에는 getElementById() 메서드로 접근할 수 있습니다.
Input Radio 객체의 주요 속성
라디오 버튼 객체에서 사용할 수 있는 대표적인 속성은 다음과 같습니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | autofocus 페이지가 로드될 때 해당 라디오 버튼이 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다. |
| 2 | checked 라디오 버튼의 현재 체크 상태를 설정하거나 반환합니다. |
| 3 | defaultChecked 라디오 버튼의 checked 속성에 지정된 기본값을 반환합니다. |
| 4 | defaultValue 라디오 버튼의 기본값을 설정하거나 반환합니다. |
| 5 | disabled 라디오 버튼을 비활성화할지 여부를 설정하거나 반환합니다. |
| 6 | form 해당 라디오 버튼을 포함하고 있는 폼(form)에 대한 참조를 반환합니다. |
| 7 | name 라디오 버튼의 name 속성 값을 설정하거나 반환합니다. |
| 8 | required 폼을 제출하기 전에 라디오 버튼 선택이 필수인지 여부를 설정하거나 반환합니다. |
| 9 | type 해당 폼 요소의 유형(즉, "radio")을 반환합니다. |
| 10 | value 라디오 버튼의 value 속성 값을 설정하거나 반환합니다. |
문법(Syntax)
다음은 라디오 타입의 input 요소 객체를 새로 생성하는 문법입니다.
var R = document.createElement("INPUT");
R.setAttribute("type", "radio");예제
버튼을 클릭하면 라디오 버튼이 화면에 동적으로 추가되는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function createRadio() {
var R = document.createElement("INPUT");
R.setAttribute("type", "Radio");
document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input radio object</h1>
<p>아래 버튼을 클릭하면 라디오 타입의 입력 필드가 생성됩니다</p>
<button type="button" onclick="createRadio()">CREATE</button>
<br><br>
Mango:
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CREATE 버튼을 클릭하면 라디오 버튼이 동적으로 추가됩니다.
코드 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 버튼 클릭 이벤트 처리
사용자가 CREATE 버튼을 클릭하면 onclick 이벤트 핸들러를 통해 createRadio() 함수가 실행됩니다.
<button type="button" onclick="createRadio()">CREATE</button>
2. 요소 생성 및 속성 지정
createRadio() 함수 내부에서는 document 객체의 createElement() 메서드에 "INPUT"을 인자로 전달하여 새로운 <input> 요소를 생성합니다. 생성된 요소는 변수 R에 할당되며, 이어서 setAttribute() 메서드를 사용해 type 속성을 "radio" 값으로 지정합니다.
여기서 기억할 점은, setAttribute()는 해당 속성이 기존에 존재하지 않으면 새로 생성한 후 값을 할당한다는 것입니다.
3. DOM에 요소 추가
마지막으로 document.body에 appendChild() 메서드를 호출하여 라디오 타입의 input 요소를 body의 자식 노드로 추가합니다.
function createRadio() {
var R = document.createElement("INPUT");
R.setAttribute("type", "Radio");
document.body.appendChild(R);
}이처럼 HTML DOM의 Input Radio 객체를 활용하면 페이지 로드 후에도 자바스크립트만으로 라디오 버튼을 자유롭게 생성하고 제어할 수 있습니다.