웹 개발에서 체크박스(checkbox)가 선택되었는지 여부를 확인하는 것은 폼 유효성 검사나 사용자 인터랙션 처리 시 자주 필요한 기능입니다. JavaScript에서는 체크박스 요소의 checked 속성을 활용하면 간단하게 선택 상태를 판별할 수 있습니다.
아래 예제는 체크박스를 클릭할 때마다 선택 여부에 따라 텍스트 박스를 보여주거나 숨기는 방식으로 이 원리를 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<h1>체크박스 선택 시 textBox 표시하기</h1>
Checkbox: <input type="checkbox" class="check" onclick="checkFunction()" />
<h2 class="textBox" style="display:none">체크박스가 선택되었습니다!!!</h2>
<script>
document.querySelector(".check").addEventListener("click", checkFunction);
function checkFunction() {
var checkBox = document.querySelector(".check");
var textBox = document.querySelector(".textBox");
if (checkBox.checked == true) {
textBox.style.display = "block";
} else {
textBox.style.display = "none";
}
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 동작 방식은 다음과 같습니다.
document.querySelector(".check")를 통해 체크박스 요소를 가져오고, addEventListener로 클릭 이벤트가 발생할 때마다 checkFunction 함수가 실행되도록 등록합니다.
함수 내부에서는 checkBox.checked 값이 true인지 확인합니다. 체크박스가 선택된 상태라면 textBox의 display 스타일을 "block"으로 변경하여 화면에 표시하고, 선택 해제된 상태라면 "none"으로 설정해 다시 숨깁니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
체크박스를 클릭하면 아래와 같이 메시지가 나타납니다.
정리
JavaScript로 체크박스의 선택 여부를 확인하는 가장 기본적인 방법은 checked 속성을 참조하는 것입니다. 이 속성은 불리언(Boolean) 값을 반환하므로, if 문과 함께 사용하면 선택 상태에 따라 다양한 UI 동작을 손쉽게 구현할 수 있습니다. 실무에서는 폼 제출 전 필수 동의 항목 검증, 조건부 필드 노출 등 여러 상황에서 유용하게 활용됩니다.