Javascript로 체크박스의 체크여부를 확인하는 방법

 

자바스크립트로 체크박스 체크여부 확인하기

JavaScript를 사용하여 체크박스의 체크 여부를 확인하는 방법에 대해 알아봅시다.

 

 

 

728x90

1. checked 속성을 이용한 방법

JavaScript에서는 checked 속성을 통해 체크박스가 선택되었는지 여부를 확인할 수 있습니다. 이 속성은 true 또는 false 값을 가지며, 선택되었을 경우 true, 선택되지 않았을 경우 false가 반환됩니다.

(1) 하나의 체크박스 확인하기
하나의 체크박스의 상태를 확인하려면 다음과 같이 코드를 작성할 수 있습니다:

let checkbox = document.getElementById("checkboxId");

if (checkbox.checked) {
    console.log("체크되었습니다!");
} else {
    console.log("체크되지 않았습니다.");
}

위 코드에서 "checkboxId"는 실제로 존재하는 체크박스 요소의 ID 값으로 바꿔주셔야 합니다.

 

(2) 여러 개의 체크박스 확인하기
여러 개의 체크박스가 있는 경우, 반복문과 함께 사용하여 각각의 상태를 확인할 수 있습니다. 다음은 예시 코드입니다:

let checkboxes = document.querySelectorAll(".checkboxClass");

for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
        console.log("체크되었습니다!");
    } else {
        console.log("체크되지 않았습니다.");
    }
}

위 코드에서 "checkboxClass"는 실제로 존재하는 모든 체크박스 요소들이 공통으로 가진 클래스 이름으로 바꿔주셔야 합니다.

 

 

2. jQuery를 활용하는 방법

jQuery도 간단하게 사용하여 체크 및 언체크 된 상태인지 확인할 수 있습니다. jQuery에서는 .prop() 메서드나 .is() 메서드 등을 활용합니다.

(1) 하나의 체크박스 확인하기
다음은 jQuery를 사용하여 하나의 체큭 및 언체크된 상태인지 확인하는 예시입니다:

let checkbox = $("#checkboxId");

if (checkbox.prop("checked")) {
    console.log("체트되었습니다!");
} else {
    console.log("체트되지 않았습니다.");
}

위 코드에서 "#checkboxId"는 실제로 존재하는 해당 요소(체크 및 언체크 가능한 타입일 것)에 대한 ID 값으로 바꿔주셔야 합니다.

(2) 여러 개의 체크 및 언체크된 상태인지 확인하기
여러 개의 요소 중 모든 것이 선택됐거나, 하나라도 선택 안 됐으면 특정 동작을 실행하고자 할 때 다음과 같이 작성할 수 있습니다:

$(".checkboxClass").each(function() {
    if ($(this).prop("checked")) {
        console.log($(this).attr('id') + "은(는) 선택됐어요!");
    } else {
        console.log($(this).attr('id') + "은(는) 선택 안 됐어요.");
    }
});

위 코드에서 "#checkboxClass" 부분은 실제로 존재하는 해당 요소들(모두 타입일 것임!)에 대한 클래스 이름으로 바꿔주셔야 합니다.

 

 

 

마무리

JavaScript와 jQuery 모두 간단하게 사용하여 HTML 문서 내에 있는 하나 또는 여러 개의 체크/언체크 된 상태인지 파악할 수 있습니다. 필요에 따라 위 예시들을 참고하여 원하는 동작을 구현해 보세요!

더 많은 예시와 실전 활용 사례들은 공식 문서나 참고 자료들에서 확인하실 수 있으니 궁금한 점이 있다면 찾아보세요!

Happy coding! 😊