웹 개발을 하다 보면 체크박스(checkbox)가 사용자에 의해 선택되었는지 여부를 확인해야 하는 경우가 자주 발생합니다. 예를 들어 약관 동의 여부를 검증하거나, 폼 제출 전에 필수 항목이 체크되었는지 확인할 때 유용하게 사용됩니다.
checked 속성 활용하기
JavaScript에서는 DOM 요소의 checked 속성을 사용하여 체크박스의 선택 상태를 손쉽게 확인할 수 있습니다. 이 속성은 체크박스가 선택되어 있으면 true를, 선택되어 있지 않으면 false를 반환합니다.
예제 코드
아래 코드는 버튼을 클릭했을 때 체크박스의 선택 여부를 알림 창으로 표시하는 간단한 예제입니다.
<html>
<head>
<script>
function myFunction(){
var result = document.getElementById("check").checked;
alert(result);
}
</script>
</head>
<body>
<label><input id="check" type="checkbox">One</label><br>
<button onclick="myFunction()">Check value</button>
</body>
</html>코드 설명
- document.getElementById("check"): id가 "check"인 체크박스 요소를 가져옵니다.
- .checked: 해당 요소의 선택 상태를 불리언(Boolean) 값으로 반환합니다.
- alert(result): 결과값을 화면에 표시합니다. 체크박스가 선택된 경우
true, 그렇지 않으면false가 출력됩니다.
응용: 조건문과 함께 사용하기
실무에서는 단순히 값을 확인하는 것보다 조건문과 결합하여 특정 로직을 실행하는 경우가 많습니다.
function myFunction(){
var checkbox = document.getElementById("check");
if (checkbox.checked) {
alert("체크박스가 선택되었습니다.");
} else {
alert("체크박스가 선택되지 않았습니다.");
}
}이처럼 checked 속성만 활용하면 별도의 라이브러리 없이도 체크박스의 상태를 간편하게 처리할 수 있습니다.