HTML DOM 입력 체크박스 객체 완벽 정리

HTML DOM의 입력 체크박스(Input Checkbox) 객체는 HTML에서 type="checkbox"로 지정된 <input> 요소를 자바스크립트로 다룰 수 있게 해주는 객체입니다. 이 객체를 활용하면 체크박스의 상태 확인, 값 변경, 비활성화 처리 등을 동적으로 제어할 수 있습니다.

체크박스 객체 생성 문법

자바스크립트로 체크박스 요소를 새로 생성하는 기본 문법은 다음과 같습니다.

var checkboxObject = document.createElement("input");
checkboxObject.type = "checkbox";

먼저 document.createElement()로 <input> 요소를 만든 뒤, type 속성에 "checkbox"를 할당하면 체크박스 객체가 완성됩니다.

주요 속성(Attributes)

생성된 체크박스 객체는 아래와 같은 속성들을 가지며, 각 속성을 통해 체크박스의 다양한 상태와 동작을 제어할 수 있습니다.

속성	설명
autofocus	페이지가 처음 로드될 때 해당 체크박스에 자동으로 포커스를 설정할지 여부를 정의합니다.
checked	체크박스의 현재 상태, 즉 체크됨(checked) 또는 해제됨(unchecked) 여부를 나타냅니다.
defaultChecked	checked 속성의 기본값(true/false)을 반환합니다.
defaultValue	체크박스의 기본값을 설정하거나 반환합니다.
disabled	체크박스가 비활성화(disabled)되었는지 활성화(enabled)되었는지를 정의합니다.
form	해당 체크박스를 포함하고 있는 폼(form)에 대한 참조를 반환합니다.
indeterminate	체크박스의 불활정(indeterminate) 상태를 설정하거나 반환합니다. 예를 들어 '일부 선택됨' 상태를 표현할 때 사용됩니다.
name	체크박스의 name 속성 값을 정의합니다. 폼 전송 시 데이터 식별에 사용됩니다.
required	폼을 제출하기 위해 체크박스가 반드시 선택되어야 하는지 여부를 정의합니다.
type	체크박스 폼 요소의 유형(type)을 반환하며, 항상 "checkbox"입니다.
value	체크박스의 value 속성 값을 정의합니다. 서버로 전송되는 실제 데이터 값입니다.

실습 예제: value 속성 활용하기

이제 Input Checkbox의 value 속성을 실제로 다뤄보는 예제를 살펴보겠습니다. 버튼 클릭 시 체크박스의 value 값을 동적으로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
    var valueOfInput = document.getElementById("formCheckbox");
    var displayDiv = document.getElementById("displayDiv");
    displayDiv.textContent = 'Value: ' + valueOfInput.value;
    function changeType(){
        if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
            valueOfInput.value = 'Red'
            displayDiv.textContent = 'value: ' + valueOfInput.value;
        } else {
            displayDiv.textContent = 'Check the checkbox to change value to red';
        }
    }
</script>
</body>
</html>

코드 설명

페이지가 로드되면 displayDiv에 현재 체크박스의 value인 'Green'이 표시됩니다.
'Change value of input checkbox' 버튼을 클릭하면 changeType() 함수가 실행됩니다.
이때 체크박스가 선택된 상태라면 value가 'Red'로 변경되고 화면에도 갱신됩니다.
체크박스가 선택되지 않은 상태에서 버튼을 누르면 "Check the checkbox to change value to red"라는 안내 메시지가 출력됩니다.

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Change value of input checkbox' 버튼을 클릭하기 전 화면입니다.

HTML DOM 입력 체크박스 객체 완벽 정리 – 속성과 활용 예제

'Change value of input checkbox' 버튼을 클릭한 후 화면입니다.

HTML DOM 입력 체크박스 객체 완벽 정리 – 속성과 활용 예제

'Color-Red' 체크박스를 선택한 상태에서 'Change value of input checkbox' 버튼을 클릭한 결과입니다.

HTML DOM 입력 체크박스 객체 완벽 정리 – 속성과 활용 예제

마무리

HTML DOM의 입력 체크박스 객체는 웹 폼에서 사용자 선택값을 처리하는 핵심 요소입니다. checked, value, disabled 등의 속성을 조합하면 약관 동의, 다중 선택 목록, 필수 확인 등 다양한 UI 시나리오를 손쉽게 구현할 수 있습니다. 위 예제를 직접 실행해 보면서 각 속성의 동작 방식을 익혀보시기 바랍니다.