jQuery에서 체크박스(확인란)가 선택되어 있는지 확인하는 가장 간단한 방법 중 하나는 toggle() 메서드를 활용하는 것입니다. 체크박스의 클릭 이벤트와 함께 this.checked 값을 전달하면, 체크 상태에 따라 특정 요소를 자동으로 보이거나 숨길 수 있습니다.
예제 코드
아래는 체크박스를 클릭하면 숨겨진 텍스트 영역이 나타나거나 사라지는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스 선택 여부 확인</title>
<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>
</head>
<body>
<input type="checkbox" id="selectName"/>
<div id="txtName" style="display:none">당신의 이름은 Adam Smith입니다.</div>
<script>
$('#selectName').click(function() {
$("#txtName").toggle(this.checked);
});
</script>
</body>
</html>
실행 방법
위 코드를 index.html과 같은 이름으로 저장한 뒤, VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server(Live Server로 열기) 옵션을 선택하면 바로 실행해 볼 수 있습니다.
실행 결과
프로그램을 실행하면 다음과 같은 화면이 출력됩니다.
체크박스를 선택하면 아래와 같이 숨겨져 있던 텍스트가 화면에 표시됩니다.
다른 확인 방법
toggle() 외에도 jQuery에서는 체크박스의 선택 여부를 확인하는 몇 가지 방법이 더 있습니다.
1. is(':checked') 사용
선택 여부를 불리언 값으로 반환받아 조건문에서 활용할 수 있습니다.
if ($('#selectName').is(':checked')) {
console.log("체크박스가 선택되어 있습니다.");
} else {
console.log("체크박스가 선택되지 않았습니다.");
}
2. prop('checked') 사용
jQuery 1.6 이상에서 권장되는 방식으로, 속성 값을 직접 가져옵니다.
var isChecked = $('#selectName').prop('checked');
참고로 구버전에서 사용되던 attr('checked')는 HTML 속성의 초기값만 반환하므로, 현재 상태를 확인하려면 prop()을 사용하는 것이 안전합니다.