[Jquery] 체크박스 전체 체크 , 해제 하는 방법
- FRONTEND/Jquery
- 2020. 7. 16. 10:24
체크박스를 이용해서 개발을 진행할때 전체 버튼을 이용해서 체크박스들을 체크하거나 해제해야 하는 경우가 빈번하게 있습니다. 그래서 간단하게 샘플소스를 구현해 봤습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//전체 체크박스 클릭
$("#checkAll").click(function() {
if ($("#checkAll").prop("checked")) {
$(".test").prop("checked", true);
} else {
$(".test").prop("checked", false);
}
});
//전체 체크박스 선택중 체크박스 하나를 풀었을때 "전체" 체크해제
$(".test").click(function() {
if ($("input[name='check']:checked").length == 4) {
$("#checkAll").prop("checked", true);
} else {
$("#checkAll").prop("checked", false);
}
});
});
</script>
</head>
<body>
<input type="checkbox" class="test" name="checkAll" id="checkAll">
<span>전체</span>
<input type="checkbox" class="test" name="check">
<span>KT</span>
<input type="checkbox" class="test" name="check">
<span>SKT</span>
<input type="checkbox" class="test" name="check">
<span>LGU+</span>
<input type="checkbox" class="test" name="check">
<span>알뜰폰 등 기타</span>
</body>
</html>
|
cs |
아래는 샘플소스를 실행한 내용입니다.
전체 KT SKT LGU+ 알뜰폰 등 기타
'FRONTEND > Jquery' 카테고리의 다른 글
DataTable 서버 사이드 CSV 전체 다운로드 (0) | 2019.12.10 |
---|---|
[Jquery] 제이쿼리 a 링크 클릭 방지(#대신) (0) | 2019.04.22 |
[Jquery] 제이쿼리 Input 태그 체크박스, 라디오 상태 체크 및 해제 (0) | 2019.01.08 |
[Jquery] 제이쿼리 체크박스 선택 여부 결정 후 value값 넣기 (2) | 2019.01.08 |
JQuery (0) | 2018.01.17 |