참고: https://www.tutorialspoint.com/How-to-check-whether-a-checkbox-is-checked-in-JavaScript
이 포스트에서는 JavaScript에서 체크박스가 체크되어 있는지 확인하는 방법을 알아보겠습니다. 체크박스는 선택상자 형태로 작동하는 HTML의 input 요소입니다. 특정 그룹의 radio 버튼에서는 사용자가 여러개의 버튼 중 하나의 값만 선택할 수 있는 반면 체크박스는 사용자가 여러개의 값을 선택하게 할 수 있습니다.
여러분은 체크박스를 많이 사용해 봤을 것 입니다. HTML 만으로 웹 페이지에 체크박스를 추가할 수 있지만 체크박스에 동작을 추가하려면 JavaScript를 사용해야 합니다. 코딩 여부에 따라 체크박스의 선택 여부에 따라 다른 동작을 추가할 수 있습니다.
이제 하나 또는 여러 체크박스의 선택 여부를 확인하는 방법을 알아보겠습니다.
하나의 체크박스가 선택되었는지 확인하는 방법
여기서 체크박스의 선택여부를 확인하는 방법에 대해 알아보겠습니다. JavaScript에서는 id, class, tag를 통해 체크박스 요소에 접근할 수 있고 그 요소에서 .checked 속성을 확인해 체크박스가 선택되어 있는지를 true, false로 리턴합니다.
코드
아래 구문에 따라 체크박스의 선택여부를 확인할 수 있습니다.
const checkbox = document.getElementById("checkbox_id");
console.log(checkbox.checked);예제
다음 예제에서는 체크박스를 생성했습니다. 또한 체크박스에 이벤트 리스너를 추가했습니다. 이렇게 하면 사용자가 체크박스를 체크할 경우 이벤트 리스너가 호출됩니다. 이벤트 리스너에서는 체크박스가 체크되어 있는지 아닌지 확인합니다. 만일 체크가 되어있다면 div에 문자열을 출력하고 아니면 div를 빈칸으로 만듭니다.
<html>
<body>
<h2>체크박스 선택여부를 <i>.checked 속성</i>으로 확인</h2>
<h4>div에 문자열을 표시하도록 체크해주세요</h4>
<input type="checkbox" id="checkbox">
<div id="text"> </div>
<script>
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
text.innerHTML = "체크박스가 선택되었습니다";
} else {
text.innerHTML = "";
}
});
</script>
</body>
</html>코드를 실행하고 체크박스를 선택하면 아래 스샷처럼 "체크박스가 선택되었습니다" 라는 메시지가 표시되는 것을 확인할 수 있습니다. 체크박스 선택을 취소하면 아무것도 표시되지 않습니다.
여러개의 체크박스 선택여부 확인
하나의 체크박스에서 값을 확인하는 것은 간단합니다. 하지만 대부분 웹 사이트의 약관동의 화면을 보면 여러개의 체크박스를 표시하고 모든 체크박스를 체크하면 수락 버튼이 활성화 됩니다.
여기서도 비슷한 것을 해보겠습니다. 여러개의 체크박스를 생성하여 모든 체크박스를 확인하고 이를 기반으로 정해진 버튼을 활성화 하겠습니다.
코드
- 여러 체크박스와 버튼 요소 접근
const checkbox = document.getElementsByName("checkbox");
const button = document.getElementById("btn");- 모든 체크박스에 이벤트 리스너 추가
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].addEventListener("change", () => {
});
}- 이벤트 리스너에서 모든 체크박스 선택여부 확인
button.disabled = false;
for (let i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked == false) {
button.disabled = true;
}
}예제
아래 예제에서는 이름이 같은 세 개의 체크박스를 만들었습니다. 이는 모든 체크박스가 같은 그룹에 속함을 의미합니다. 또한 HTML로 버튼을 만들고 JavaScript로 id, name을 사용해 체크박스와 버튼 요소에 접근했습니다.
그리고 모든 체크박스에 이벤트 리스너를 추가했습니다. 체크박스 값이 변경되면 모든 체크박스가 선택되어있는지 확인합니다. 모든 체크박스가 선택됐으면 버튼을 활성화 하고 그렇지 않으면 버튼을 비활성화 합니다.
<html>
<body>
<h2>체크박스 체크 여부 확인</h2>
<h4>체크박스들을 체크하여 버튼 활성화</h4>
<input type="checkbox" name="checkbox">
<input type="checkbox" name="checkbox">
<input type="checkbox" name="checkbox">
<button id="btn" disabled>가입 버튼</button>
<script>
const checkbox = document.getElementsByName("checkbox");
const button = document.getElementById("btn");
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].addEventListener("change", () => {
button.disabled = false;
for (let i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked == false) {
button.disabled = true;
}
}
});
}
</script>
</body>
</html>위의 코드를 실행하고 모든 체크박스를 체크하면 버튼이 활성화되고, 그렇지 않으면 버튼은 비활성화 상태로 유지됩니다.
정리
이 포스트에서는 하나의 체크박스 또는 여러개의 체크박스가 선택되었는지 여부를 확인하는 방법을 알아봤습니다. 그리고 체크박스의 선택 값에 따라 웹 페이지에 다양한 동작을 추가하였습니다. 이 외에도 jQuery 같은 라이브러리를 사용하면 여러개의 체크박스를 확인하는 수고를 조금 덜 할 수도 있습니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 배열 splice() 사용 방법 (1) | 2023.03.03 |
|---|---|
| [javascript] 자바스크립트 애니메이션 RequestAnimationFrame (4) | 2023.02.27 |
| [javascript] 자바스크립트 클립보드 복사 (clipboard api) (3) | 2023.02.07 |
| [javascript] 자바스크립트 경과시간 계산 (stopwatch) (3) | 2023.02.06 |
| [javascript] 자바스크립트 fetch로 JSON post (then, async, await) (2) | 2023.02.01 |
댓글