모든 체크박스 선택/해제 기능 구현하기
체크박스는 웹 페이지에서 자주 사용되는 요소로, 사용자가 여러 항목을 선택할 수 있게 합니다. 특히, "전체 선택" 체크박스를 통해 모든 항목을 한 번에 선택하거나 해제하는 기능은 편리합니다. 이 글에서는 jQuery를 사용해 모든 체크박스를 선택하거나 해제하는 기능과 개별 체크박스를 클릭할 때 전체 선택 상태를 업데이트하는 방법에 대해 설명합니다.
1. 전체 선택/해제 기능
전체 선택/해제 기능은 "전체 선택" 체크박스를 클릭했을 때 모든 개별 체크박스의 선택 상태를 변경하는 기능입니다. 이를 구현하기 위해 다음과 같은 jQuery 코드를 사용할 수 있습니다.
// 전체 선택/해제
$(document).on('click', '#getCheckAll', function() {
$('.getDelete').prop('checked', this.checked);
});이 코드는 #getCheckAll ID를 가진 체크박스를 클릭했을 때, this.checked 값을 이용해 모든 .getDelete 클래스를 가진 체크박스의 checked 속성을 설정합니다.
2. 개별 체크박스 클릭 시 전체 선택 상태 업데이트
개별 체크박스를 클릭할 때 전체 선택 체크박스의 상태를 업데이트하는 기능도 필요합니다. 모든 개별 체크박스가 선택된 경우 전체 선택 체크박스를 선택 상태로 만들고, 그렇지 않은 경우 해제 상태로 만드는 코드입니다.
// 개별 체크박스 클릭 시 전체 선택 상태 업데이트
$(document).on('click', '.getDelete', function() {
$('#getCheckAll').prop('checked', $('.getDelete:checked').length === $('.getDelete').length);
});이 코드는 .getDelete 클래스를 가진 체크박스를 클릭할 때마다 실행됩니다. 현재 선택된 개별 체크박스의 개수와 전체 개별 체크박스의 개수를 비교하여 #getCheckAll 체크박스의 상태를 업데이트합니다.
전체 코드
위의 두 기능을 합치면 전체 선택/해제와 개별 체크박스의 상태에 따라 전체 선택 상태를 업데이트하는 완전한 코드를 만들 수 있습니다.
$(document).on('click', '#getCheckAll', function() {
$('.getDelete').prop('checked', this.checked);
});
$(document).on('click', '.getDelete', function() {
$('#getCheckAll').prop('checked', $('.getDelete:checked').length === $('.getDelete').length);
});사용 예시
이제 HTML과 함께 예제를 살펴보겠습니다. 다음은 전체 선택 기능과 개별 체크박스가 포함된 간단한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '#getCheckAll', function() {
$('.getDelete').prop('checked', this.checked);
});
$(document).on('click', '.getDelete', function() {
$('#getCheckAll').prop('checked', $('.getDelete:checked').length === $('.getDelete').length);
});
</script>
</head>
<body>
<h2>전체 선택/해제 체크박스 예제</h2>
<input type="checkbox" id="getCheckAll"> 전체 선택<br><br>
<input type="checkbox" class="getDelete"> 항목 1<br>
<input type="checkbox" class="getDelete"> 항목 2<br>
<input type="checkbox" class="getDelete"> 항목 3<br>
</body>
</html>이 예제를 통해, 사용자는 "전체 선택" 체크박스를 클릭하여 모든 항목을 선택하거나 해제할 수 있으며, 개별 항목을 클릭할 때마다 "전체 선택" 체크박스의 상태가 자동으로 업데이트됩니다.
이 글에서는 jQuery를 사용하여 전체 선택/해제 기능과 개별 체크박스를 클릭할 때 전체 선택 상태를 업데이트하는 방법을 설명했습니다. 이러한 기능은 사용자 경험을 향상시키고, 여러 항목을 쉽게 관리할 수 있게 해줍니다. 간단한 코드를 통해 이러한 기능을 쉽게 구현할 수 있으니, 여러분의 프로젝트에도 적용해 보세요.
'IT 정보' 카테고리의 다른 글
| 해시태그 선택 기능 구현하기 (최대 5개 선택 제한) (1) | 2024.06.11 |
|---|---|
| 그누보드/영카트 관리자 회원 추가 (0) | 2024.06.10 |
| php/그누보드/영카트 이동시 포스트로 데이터 갖고 넘기기 (0) | 2024.06.05 |
| 그누보드/영카트 관리자에서 로고 이미지 등록 하는법 (0) | 2024.06.05 |
| 그누보드/영카트 회원가입 이메일로 하기 (0) | 2024.05.31 |