웹 개발에서 체크박스의 선택 상태를 동적으로 제어하는 것은 매우 흔한 작업입니다. 이 글에서는 자바스크립트를 활용해 버튼 클릭 한 번으로 체크박스를 선택하거나 해제하는 간단한 예제를 소개합니다.
예제 코드
다음은 자바스크립트를 사용하여 체크박스를 선택/해제하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Check/uncheck boxes using JavaScript</h1>
<input class="check" type="checkbox" />
<button class="Btn">Toggle</button>
<script>
let BtnEle = document.querySelector(".Btn");
let checkEle = document.querySelector(".check");
BtnEle.addEventListener("click", () => {
if (checkEle.checked === true) checkEle.checked = false;
else checkEle.checked = true;
});
</script>
</body>
</html>코드 동작 원리
이 예제는 다음과 같은 방식으로 작동합니다.
1. 요소 선택: document.querySelector() 메서드를 사용하여 클래스명이 .Btn인 버튼 요소와 .check인 체크박스 요소를 각각 가져옵니다.
2. 이벤트 리스너 등록: addEventListener("click", ...)를 통해 버튼이 클릭될 때마다 실행될 콜백 함수를 등록합니다.
3. 상태 토글: 체크박스의 checked 속성값을 확인하여 현재 true(선택됨)라면 false로, 반대라면 true로 변경합니다. 이를 통해 클릭할 때마다 체크박스 상태가 자동으로 전환(toggle)됩니다.
실행 결과
페이지를 실행하면 체크박스 하나와 'Toggle' 버튼이 화면에 나타납니다.
토글 버튼을 클릭하면 아래와 같이 체크박스가 선택 상태로 전환되며, 다시 클릭하면 해제됩니다.
마무리
이처럼 checked 속성만 활용하면 별도의 라이브러리 없이도 체크박스의 선택 상태를 손쉽게 제어할 수 있습니다. 여러 개의 체크박스를 한꺼번에 제어하거나, '전체 선택' 기능을 구현할 때도 동일한 원리를 확장하여 적용할 수 있으니 참고하시기 바랍니다.