https://aosceno.tistory.com/443
CSS 커스텀 체크박스 + vanilla JS로 체크박스 전체선택, 전체해제 (2)
https://aosceno.tistory.com/435 전 게시물 참조. 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제 3) 자식.." data-og-host="aosceno.ti..
aosceno.tistory.com
원리는 같지만, 이벤트 위임 방식으로 바꾸어 해봤음
체크박스 전체선택 해제 - 이벤트 위임.zip
0.00MB
HTML
|
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
|
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link href="checkall.css" rel="stylesheet" type="text/css"/>
<script src="checkall.js" defer></script>
</head>
<body>
<section class="sect">
<label><input type="checkbox" class="chkAll" checked><span>전체 선택or해제</span></label>
<label><input type="checkbox" class="chk" checked><span>lorem</span></label>
<label><input type="checkbox" class="chk" checked><span>dolor</span></label>
<label><input type="checkbox" class="chk" checked><span>ipsum</span></label>
<label><input type="checkbox" class="chk" checked><span>dolor</span></label>
<label><input type="checkbox" class="chk" checked><span>ipsum</span></label>
<label><input type="checkbox" class="chk" checked><span>dolor</span></label>
<label><input type="checkbox" class="chk" checked><span>lorem</span></label>
<label><input type="checkbox" class="chk" checked><span>dolor</span></label>
</section><!-- sect -->
<section class="sect">
<label><input type="checkbox" class="chkAll"><span>전체 선택or해제</span></label>
<label><input type="checkbox" class="chk" checked><span>loremafasdgasdfasgasdf</span></label>
<label><input type="checkbox" class="chk"><span>asdfsgasdfipsum</span></label>
<label><input type="checkbox" class="chk"><span>doloras gasdfasdf</span></label>
</section><!-- sect -->
</body>
</html>
|
cs |
CSS
|
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
display:flex;flex-wrap:wrap;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;min-height:100vh;
background:#eee;
font-family:'Nanum Gothic', sans-serif;
font-size:20px;color:#666;}
[type="checkbox"]{
position:absolute;overflow:hidden;
width:1px;height:1px;
clip:rect(0,0,0,0);}
label{
display:block;position:relative;
margin:.5rem 1rem;
cursor:pointer;}
/* */
.sect{
display:flex;flex-wrap:wrap;
justify-content:center;
align-items:center;
width:95%;
margin:1rem auto; padding:1rem;
background:#fff;
border:1px solid #d2d2d2;}
[type="checkbox"] + span{pointer-events:none;}
/* */
.chkAll + span{
display:block; position:relative;
padding:1em 2em;
border:1px solid #ccc;
border-radius:10rem;
font-size:.6rem;font-weight:bold;}
.chkAll:checked + span{
border-color:transparent;
background:rgb(166, 255, 0);color:rgb(30, 0, 68);
box-shadow:
0px 0px 1rem .2rem rgba(255, 255, 255,1),
0px 0px 1rem rgb(166, 255, .1);}
.chk + span{
display:block;position:relative;
padding:.8em 2em .8em 2.5em;
border:1px solid #ccc;
border-radius:10rem;}
.chk:checked + span{
background:slateblue;
font-weight:bold;color:#fff;}
.chk:checked + span::before{
content:'';display:block;position:absolute;
left:.5em;top:50%;
transform:rotate(45deg) translateY(-90%);
width:.4em;height:.8em;
border:2px solid rgba(255,255,255,.5);border-width:0 4px 4px 0;
}
|
cs |
JS
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | const sect = document.getElementsByClassName('sect'); for(let section of sect){ section.addEventListener('click', e => { if(e.target.type == "checkbox"){check_boxes(e.target);} }); } function check_boxes(tgt){ const prnt = tgt.parentElement.parentElement; if(tgt.classList.contains('chkAll')){ is_chkAll(prnt,tgt); }else{ are_all(prnt); } }//check_boxes function is_chkAll(parent,tgt){ switch(tgt.checked){ case true : on_chkAll(parent); break; case false : off_chkAll(parent); break; } }//is_chkAll function on_chkAll(parent){ const chk = parent.getElementsByClassName('chk'); for(let chkbox of chk){ chkbox.checked = true; } }//on_chkAll function off_chkAll(parent){ const chk = parent.getElementsByClassName('chk'); for(let chkbox of chk){ chkbox.checked = false; } }//off_chkAll function are_all(parent){ const chk = parent.getElementsByClassName('chk'); const chkAll = parent.getElementsByClassName('chkAll')[0] for(let chkbox of chk){ if(!chkbox.checked){ chkAll.checked = false; return; }else{ chkAll.checked = true; } } }//are_all | cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| atan2로 클릭한 좌표 따라 회전시키기 (0) | 2021.06.30 |
|---|---|
| (CSS)cornic-gradient로 파이 그래프(원 그래프) 구현하기 (0) | 2021.06.30 |
| vanilla JS Slider 1.2 (바닐라 자바스크립트 슬라이드 1.2) (0) | 2021.06.18 |
| twitter app header처럼 vanilla JS로 스크롤에 따라 내려오고 올라가는 헤더 만들기(2) (0) | 2021.06.10 |
| marquee 텍스트 효과 CSS로 구현하기 (0) | 2021.05.07 |