퍼블리싱/javascript&jQuery
모두체크/모두해지 체크박스 만들기
도라미도라미
2019. 2. 22. 15:00
주로 회원가입할 때 동의하기 부분에서 많이 사용하는 체크박스를 만들어봤어요.
특징은
1. '모두 선택하기', '모두 해지하기'
2. 하나라도 해지되면 모두 선택 해지
html과 css는 그 전글에 올려놨어요.
이 전글이예요. -> [css] 회원가입 폼 체크박스
요건 완성된 모습입니다. 작동되는건 이전글에서 확인!
자바스크립트 부분입니다.
html 과 css는 이 전글에 있어요.
https://ddorang-d.tistory.com/9
[CSS] 회원가입폼 체크박스
체크박스를 활용하는 회원가입 폼을 만들어 보려합니다. 네이버 회원가입 폼을 보고 만들어서 네이버의 회원가입 폼과 아주 유사한 디자인을 가지고 있어요. 특징은! 1. 첫번째 체크박스(모두
ddorang-d.tistory.com
Javascript
|
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
|
window.onload = function () {
const checkAll = document.getElementById('chkAll');
const chks = document.querySelectorAll('.chk');
const chkBoxLength = chks.length;
checkAll.addEventListener('click', function(event) {
if(event.target.checked) {
chks.forEach(function(value){
value.checked = true;
})
}else {
chks.forEach(function(value){
value.checked = false;
})
}
});
for (chk of chks){
chk.addEventListener('click', function() {
let count = 0;
chks.forEach(function(value){
if(value.checked == true){
count++;
}
})
if(count !== chkBoxLength){
checkAll.checked = false;
}else{
checkAll.checked = true;
}
})
}
}
|
cs |
파일 다운로드