회원가입 페이지에 체크박스가 있으나 부분체크취소를 해도 전체체크가 풀리지 않는 등의 문제로 수정이 필요했다.
이분의 설명 그대로 구현하니 그 복잡한 사이트에서도 적용이 잘 되었다.
너무 감사하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "utf-8">
</head>
<input type="checkbox" class="selectAllMembers" checked=true />전체선택<br/>
<input type='checkbox' class='memberChk' checked=true>이름1<br/>
<input type='checkbox' class='memberChk' checked=true>이름2<br/>
<input type='checkbox' class='memberChk' checked=true>이름3<br/>
<script>
var selectAll = document.querySelector(".selectAllMembers");
selectAll.addEventListener('click', function(){
var objs = document.querySelectorAll(".memberChk");
for (var i = 0; i < objs.length; i++) {
objs[i].checked = selectAll.checked;
};
}, false);
var objs = document.querySelectorAll(".memberChk");
for(var i=0; i<objs.length ; i++){
objs[i].addEventListener('click', function(){
var selectAll = document.querySelector(".selectAllMembers");
for (var j = 0; j < objs.length; j++) {
if (objs[j].checked === false) {
selectAll.checked = false;
return;
};
};
selectAll.checked = true;
}, false);
}
</script>
</body>
체크박스 전체 선택/제거 기능 구현.
1. "전체선택"을 눌렀을 때, 전체 체크박스가 체크 되고, 다시 눌렀을 때 체크가 해제 되어야 한다.
2. 목록 전체의 체크박스 중, 하나만이라도 체크가 해제 되면 "전체선택" 체크박스도 따라서 해제 되어야 한다.
3. 목록 전체 체크박스가 체크 되면, "전체선택" 체크박스도 따라서 선택 되어야 한다.
출처: https://giyatto.tistory.com/51 [행복은 습관입니다.]
쿼리셀렉터가 뭔지 애드이벤트리스너가 뭔지,
공부 진짜 절실하다..
'코딩 관련' 카테고리의 다른 글
| 에디트플러스 tpl 파일 색상 적용하려면... (0) | 2021.01.11 |
|---|---|
| 미디어쿼리 요약 (0) | 2021.01.05 |
| form method="get/post", a href="tel:/mailto:" (0) | 2020.11.10 |
| <details>자바스크립트 없이 더보기 구현하는 간편html</details> (0) | 2020.09.07 |
| toggle (0) | 2020.08.20 |
댓글