HTML DOM 체크박스 value 속성 – 값 가져오기와 설정하기

HTML DOM에서 Input Checkbox의 value 속성은 체크박스(input type="checkbox") 요소에 지정된 value 속성값을 문자열 형태로 반환합니다. 또한 이 속성을 통해 기존 값을 새로운 문자열로 변경(설정)할 수도 있습니다.

구문(Syntax)

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

1. 값 가져오기 (반환)

inputCheckboxObject.value

2. 값 설정하기

value 속성에 새로운 문자열 값을 할당합니다.

inputCheckboxObject.value = 'String'

예제 코드

아래 예제는 체크박스의 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>

실행 결과

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

버튼 클릭 전

페이지가 로드되면 체크박스의 초기 value 값인 'Green'이 화면에 표시됩니다.

HTML DOM 체크박스 value 속성 – 값 가져오기와 설정하기

'Change value of input checkbox' 버튼 클릭 후

체크박스가 선택되지 않은 상태에서 버튼을 클릭하면, 조건문이 충족되지 않아 안내 메시지가 출력됩니다.

HTML DOM 체크박스 value 속성 – 값 가져오기와 설정하기

체크박스 선택 후 버튼 클릭

'Color-Red' 체크박스를 먼저 선택한 뒤 버튼을 클릭하면, value 값이 'Green'에서 'Red'로 변경되고 변경된 값이 화면에 갱신되어 표시됩니다.

HTML DOM 체크박스 value 속성 – 값 가져오기와 설정하기

핵심 정리

value 속성은 체크박스의 value 속성값을 문자열로 반환합니다.
새 문자열을 할당하여 값을 동적으로 변경할 수 있습니다.
체크박스의 value는 폼 제출 시 서버로 전송되는 실제 데이터이므로, 조건에 따라 값을 바꾸는 로직에 유용하게 활용됩니다.