JavaScript로 체크박스 선택하기 – checked 속성 완벽 정리

JavaScript로 체크박스 제어하기

웹 개발을 하다 보면 체크박스(<input type="checkbox">)의 선택 상태를 확인하거나, 자바스크립트로 특정 체크박스를 자동으로 체크해야 하는 경우가 매우 흔합니다. 이번 글에서는 checked 속성을 활용해 체크박스를 간단하게 제어하는 방법을 예제와 함께 살펴보겠습니다.

예제 HTML 구조

먼저 다음과 같이 두 개의 체크박스가 있다고 가정해 보겠습니다.

<label>John</label>
<input id="checkedValue1" type="checkbox">
<label>David</label>
<input id="checkedValue2" type="checkbox">

여기서 목표는 자바스크립트를 이용해 특정 체크박스(예: "David")를 자동으로 체크하는 것입니다. 이때 사용하는 것이 바로 checked 속성입니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 체크박스 예제</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <label>John</label>
    <input id="checkedValue1" type="checkbox">
    <label>David</label>
    <input id="checkedValue2" type="checkbox">

    <script>
        document.querySelector('#checkedValue2').checked = true;
    </script>
</body>
</html>

핵심 코드 설명

document.querySelector('#checkedValue2').checked = true;

document.querySelector(): CSS 선택자를 기반으로 HTML 요소를 가져오는 DOM API입니다.
#checkedValue2: id가 "checkedValue2", 즉 "David" 체크박스를 대상으로 삼습니다.
.checked = true: 해당 체크박스를 체크된 상태로 만듭니다. 반대로 false를 할당하면 체크가 해제됩니다.

체크박스 상태 확인 방법

checked 속성은 값을 설정할 수 있을 뿐만 아니라, 현재 상태를 불리언(Boolean) 값으로 읽어올 수도 있습니다.

const isChecked = document.querySelector('#checkedValue2').checked;
console.log(isChecked); // 체크되어 있으면 true, 아니면 false

이 기능은 폼 유효성 검사나 사용자 선택 조건 처리 시 특히 유용합니다.

실행 방법

위 코드를 index.html 등 원하는 파일명으로 저장한 후, VS Code에서 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 메뉴를 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

페이지를 열면 두 번째 체크박스("David")가 로드와 동시에 자동으로 체크되어 있는 것을 확인할 수 있습니다.

JavaScript로 체크박스 선택하기 – checked 속성 완벽 정리

마무리

이처럼 checked 속성 하나만으로도 체크박스의 선택과 해제, 상태 확인까지 모두 처리할 수 있습니다. jQuery를 사용 중이라면 $('#checkedValue2').prop('checked', true) 방식으로 동일한 결과를 얻을 수 있으니, 프로젝트 환경에 맞는 방법을 선택하시면 됩니다.