728x90
반응형
Javascript 체크박스 일괄 체크 및 해제
728x90
체크박스는 웹 페이지나 웹 애플리케이션에서 다양한 형태의 데이터 필터링이나 선택 기능을 구현할 때 사용할 수 있습니다. 여러 항목 중에서 사용자가 원하는 항목을 선택하거나 선택 해제할 수 있는 기능을 구현할 때 사용할 수 있습니다
이번 포스팅에서는 자바스크립트로 여러개의 체크박스를 한 번에 모두 선택하거나 한 번에 모두 선택을 해제하는 기능을 알아보도록 하겠습니다.
자바스크립트로 여러 체크박스 모두 체크 및 해제하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox 제어하기</title>
<script>
// 모든 체크박스를 선택하는 함수
function checkAll() {
// 모든 체크박스 요소를 선택
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 각 체크박스 요소에 대해 반복
checkboxes.forEach(checkbox => {
// 해당 체크박스를 선택 상태로 변경
checkbox.checked = true;
});
}
// 모든 체크박스의 선택을 해제하는 함수
function uncheckAll() {
// 모든 체크박스 요소를 선택
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 각 체크박스 요소에 대해 반복
checkboxes.forEach(checkbox => {
// 해당 체크박스의 선택을 해제 상태로 변경
checkbox.checked = false;
});
}
</script>
</head>
<body>
<input type="checkbox"> Checkbox 1<br>
<input type="checkbox"> Checkbox 2<br>
<input type="checkbox"> Checkbox 3<br>
<input type="checkbox"> Checkbox 4<br>
<input type="checkbox"> Checkbox 5<br><br>
<button onclick="checkAll()">모두 체크</button>
<button onclick="uncheckAll()">모두 언체크</button>
</body>
</html>
모든 체크박스를 체크 선택하기
// 모든 체크박스를 선택하기
function checkAll() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = true;
});
}
모든 체크박스의 체크 해제하기
// 모든 체크박스의 선택 해제하기
function uncheckAll() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = false;
});
}
728x90
반응형
'vita_Programing' 카테고리의 다른 글
| MSSQL 테이블 복사하기 5가지 방법과 예제(bcp 포함) (1) | 2024.06.06 |
|---|---|
| Javascript replace 함수 기본 사용법과 예제, 다양한 활용 (1) | 2024.06.02 |
| 로또 645 1등 당첨 예상번호 생성기 소스 (0) | 2024.05.31 |
| Javascript 두더지게임 소스 (1) | 2024.05.30 |
| MSSQL 문자열 자르기 함수 LEFT RIGHT SUBSTRING (2) | 2024.05.30 |
