자바스크립트, 제이쿼리 체크박스 전체선택 / 전체해제 소스를 알려드리겠습니다.
체크박스 전체 선택 및 전체 해제 기능은 자바스크립트나 jQuery에서 자주 사용되는 기능 중 하나입니다. 웹 애플리케이션에서 다수의 체크박스가 있는 경우, 사용자가 일일이 체크박스를 선택하거나 해제하는 불편을 줄이기 위해 "전체 선택"과 "전체 해제" 기능을 구현하는 것이 일반적입니다. 이 기능은 기본적으로 하나의 '전체 선택' 체크박스를 통해 다수의 체크박스를 한 번에 제어하는 방법을 의미합니다.
이제, 자바스크립트와 jQuery를 사용하여 체크박스 전체 선택 및 전체 해제 기능을 구현하는 방법에 대해 단계별로 설명하겠습니다.
---
### 1. 체크박스 전체 선택과 전체 해제 기능의 개요
체크박스 전체 선택 및 해제는 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 여러 항목을 선택해야 하는 상황에서, "전체 선택" 버튼을 통해 모든 항목을 선택하거나 해제할 수 있는 기능은 매우 유용합니다.
- **전체 선택**: 사용자가 ‘전체 선택’ 체크박스를 클릭하면, 페이지에 있는 모든 체크박스가 선택됩니다.
- **전체 해제**: 사용자가 ‘전체 선택’ 체크박스를 해제하면, 페이지의 모든 체크박스도 해제됩니다.
이를 구현하기 위해서는 다음 두 가지 요소가 필요합니다:
1. 하나의 '전체 선택' 체크박스
2. 다수의 '개별 선택' 체크박스들
---
### 2. 자바스크립트를 사용한 체크박스 전체 선택 및 해제
우선, 순수한 자바스크립트를 사용하여 체크박스 전체 선택과 해제 기능을 구현하는 방법부터 살펴보겠습니다. 자바스크립트를 사용하면 DOM을 직접 조작하여 이벤트 처리 및 체크박스 상태를 관리할 수 있습니다.
#### 2.1 HTML 구조
먼저 체크박스를 HTML로 정의합니다. `#selectAll`이라는 ID를 가진 체크박스는 "전체 선택"을 담당하며, `name="checkbox"`라는 이름을 가진 여러 개의 체크박스들이 있습니다.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스 전체 선택/해제</title>
</head>
<body>
<h3>체크박스 전체 선택 및 해제</h3>
<input type="checkbox" id="selectAll"> 전체 선택<br><br>
<input type="checkbox" name="checkbox"> 아이템 1<br>
<input type="checkbox" name="checkbox"> 아이템 2<br>
<input type="checkbox" name="checkbox"> 아이템 3<br>
<input type="checkbox" name="checkbox"> 아이템 4<br>
<script src="script.js"></script>
</body>
</html>
```
여기에서 `#selectAll`은 "전체 선택" 체크박스이고, 나머지 체크박스들은 선택 가능한 개별 항목들입니다.
#### 2.2 자바스크립트 코드
이제 자바스크립트로 체크박스 전체 선택 및 해제 기능을 구현해보겠습니다.
```javascript
// 전체 선택 체크박스를 선택합니다.
const selectAllCheckbox = document.getElementById('selectAll');
// name이 'checkbox'인 모든 체크박스를 선택합니다.
const checkboxes = document.querySelectorAll('input[name="checkbox"]');
// 전체 선택 체크박스의 상태가 변경될 때 실행할 함수
selectAllCheckbox.addEventListener('change', function() {
// 전체 선택 체크박스의 체크 상태에 따라 모든 개별 체크박스의 체크 상태를 변경
checkboxes.forEach(function(checkbox) {
checkbox.checked = selectAllCheckbox.checked;
});
});
```
#### 2.3 자바스크립트 코드 설명
- **`document.getElementById('selectAll')`**: ID가 `selectAll`인 체크박스를 선택합니다. 이 체크박스는 전체 선택 및 해제 기능을 담당합니다.
- **`document.querySelectorAll('input[name="checkbox"]')`**: name이 `checkbox`인 모든 체크박스를 선택합니다. 이들은 개별 선택 체크박스들입니다.
- **`addEventListener('change', function() {...})`**: 전체 선택 체크박스의 상태가 변경될 때(즉, 체크되거나 체크 해제될 때) 발생하는 이벤트 리스너입니다. `change` 이벤트는 체크박스의 상태가 변경될 때마다 발생합니다.
- **`checkbox.checked = selectAllCheckbox.checked`**: 전체 선택 체크박스의 상태(체크 혹은 해제)에 따라, 각 개별 체크박스의 상태를 동기화합니다. 즉, 전체 선택 체크박스가 체크되면 모든 체크박스를 체크하고, 해제되면 모두 해제합니다.
이 코드로, 사용자가 전체 선택 체크박스를 클릭하면 페이지에 있는 모든 체크박스가 선택되거나 해제됩니다.
---
### 3. jQuery를 사용한 체크박스 전체 선택 및 해제
jQuery는 자바스크립트 라이브러리로, DOM 조작을 보다 쉽게 할 수 있도록 도와줍니다. jQuery를 사용하면 자바스크립트로 구현하는 기능을 간단하게 만들 수 있습니다. 이번에는 jQuery로 체크박스 전체 선택과 해제 기능을 구현해보겠습니다.
#### 3.1 HTML 구조
HTML 구조는 자바스크립트와 동일하게 유지됩니다. 다만 jQuery를 사용하기 위해 라이브러리를 추가해야 합니다.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스 전체 선택/해제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>체크박스 전체 선택 및 해제</h3>
<input type="checkbox" id="selectAll"> 전체 선택<br><br>
<input type="checkbox" name="checkbox"> 아이템 1<br>
<input type="checkbox" name="checkbox"> 아이템 2<br>
<input type="checkbox" name="checkbox"> 아이템 3<br>
<input type="checkbox" name="checkbox"> 아이템 4<br>
<script src="script.js"></script>
</body>
</html>
```
#### 3.2 jQuery 코드
jQuery에서는 자바스크립트보다 더 간결하게 체크박스 전체 선택 및 해제를 구현할 수 있습니다.
```javascript
$(document).ready(function() {
// 전체 선택 체크박스가 변경되었을 때
$('#selectAll').change(function() {
// 전체 선택 체크박스의 상태에 따라 모든 개별 체크박스의 상태를 변경
$('input[name="checkbox"]').prop('checked', this.checked);
});
// 개별 체크박스가 변경되었을 때
$('input[name="checkbox"]').change(function() {
// 만약 전체 체크박스 중 하나라도 체크 해제되면, 전체 선택 체크박스를 해제
if ($('input[name="checkbox"]').length === $('input[name="checkbox"]:checked').length) {
$('#selectAll').prop('checked', true);
} else {
$('#selectAll').prop('checked', false);
}
});
});
```
#### 3.3 jQuery 코드 설명
- **`$(document).ready()`**: 페이지가 로드되고 DOM이 준비되었을 때 실행되는 함수입니다. 이는 jQuery에서 가장 기본적인 이벤트로, 페이지의 모든 요소가 준비되었을 때 실행됩니다.
- **`$('#selectAll').change()`**: ID가 `selectAll`인 체크박스의 상태가 변경될 때 실행되는 이벤트 핸들러입니다.
- **`$('input[name="checkbox"]').prop('checked', this.checked)`**: `prop()` 메서드를 사용하여, 전체 선택 체크박스의 상태에 따라 개별 체크박스들의 체크 상태를 설정합니다. `this.checked`는 `selectAll` 체크박스의 현재 체크 상태를 나타냅니다.
- **`$('input[name="checkbox"]').change()`**: 개별 체크박스의 상태가 변경되었을 때, 즉 개별 체크박스가 선택되거나 해제될 때 실행되는 이벤트 핸들러입니다. 이 핸들러는 개별 체크박스의 상태를 감지하여, 만약 모든 개별 체크박스가 체크되어 있다면 전체 선택 체크박스를 체크하고, 하나라도 체크가 해제되어 있으면 전체 선택 체크박스를 해제합니다.
이 코드를 통해 사용자는 전체 선택 체크박스를 클릭하여 모든 체크박스를 선택하거나 해제할 수 있고, 개별 체크박스를 체크 또는 해제함에 따라 전체 선택 체크박스의 상태가 동기화됩니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| 호스팅이란? (1) | 2024.10.16 |
|---|---|
| drm이란? (해제방법을 곁들인) (8) | 2024.10.15 |
| .jar파일이란? (1) | 2024.10.11 |
| GET POST 차이점 완벽 정리 (0) | 2024.10.10 |
| HTTP Method란? (GET, POST, PUT, DELETE) (1) | 2024.10.08 |