[문제2]
- 상위 체크박스 누를 시, 전체 선택 및 해제가 가능하게 구현
- 체크박스 5개중 1개 해제시, 전체 선택 해제 구현
- 체크한 것만 삭제할 수 있도록 구현
<script>
const checkAll = document.getElementById("checkAll");
const c1 = document.getElementsByClassName("c1");
const btn = document.getElementById("btn");
btn.addEventListener("click", function(){
let ar = [];
for(let j=0; j<c1.length;j++) {
if(c1[j].checked) {
ar.push(c1[j].getAttribute("data-del-num"))
}
}
for(let j=0; j<ar.length;j++) {
document.getElementById(ar[j]).remove();
}
})
//↓복습 파트↓
//하나 체크 해제 시 모두 해제
for (let i=0; i<c1.length;i++) {
c1[i].addEventListener("click", function(){
//별도로 보기
let flag = true;
for(let j=0; j<c1.length;j++) {
if(!c1[j].checked){
flag = false;
break;
}
}
checkAll.checked = flag;
})
}
//모두 체크 & 모두 해제
checkAll.addEventListener("click", function() {
for(let i=0;i<c1.length;i++) {
if(checkAll.checked) {
c1[i].checked = true;
} else {
c1[i].checked = false;
}
}
})
</script>
| 문제 인지 | |
| 이벤트 핸들링과 함수 | - 이벤트 핸들러와 그 내부에서 진행되는 checkbox 함수를 별개로 보지 않고 접근하는 문제 발생 - 이벤트 핸들러가 적용되고, 이를 실행할 때 값이 변경되는 문제를 인지하지 못함 - 체크했을 때 발생되는 것과 for 루프구문에서 작동하는 배열의 값 적용에 어려움을 겪음 |
| 신규 배열에 값 추가/삭제 | - 신규 배열에 값을 추가하는 push() 기능을 적절하게 사용하지 못함 - 어떤 값을 추가하는게 좋을지 인지하지 못함 |
| getAttribute 이해 문제 | - id와 class와 다르게 속성은 요소가 아닌 값을 가져온다는 사실을 인지하지 못함 |
| 자식 기반 부모 접근 | - 자식기반으로 부모에 접근하기 위해선 class를 생성하고 그 값과 id 이름을 동일시 하는 인지 부족 |
[접근 로직]
for(let i=0;i<c1.length;i++) {
c1[i].addEventListener("click", function(){ //이건 클릭에만 관한 것
let flag = true;
//모든 체크박스 검증이 필요한데 -> c1[i]는 현재 클릭된 체크박스만 검증
//즉 현재 클릭된 체크박스만 검증하게 되는 문제가 발생
//배열에 있는 모든 체크박스를 검증할 수 있음
for(let j=0;j<c1.length;j++) { //여기 확인 필요
if(!c1[j].checked) { //이건 체크에만 관한 것
flag = false;
break;
}
}
checkAll.checked = flag;
})
}
//체크된 부분 지우기
btn.addEventListener("click", function(){ //클릭된 부분 지우기
let ar = [];
//별도의 부분으로 인지
//목표 : 체크박스 내에 체크된 것을 지울 것
for(let j=0; j<c1.length;j++) {
if(c1[j].checked) { //체크된 것을 배열에 담음
ar.push(c1[j].getAttribute("data-del-num")) //data-del-num 속성의 값을 ar에 담음
//배열 -> 추가는 자바스크립트에서 push
//attribute 사용시 선언자 기반으로할 것 ****
}
}
//배열 내부에 있는것 삭제
for(let j=0; j<ar.length;j++) {
document.getElementById(ar[j]).remove(); //ar[i]에 attribute 이름들이 있고
//div에는 이와 동일한 이름이 있기떄문에 그를 기반으로 remove()
}
//유의할점은 input을 통해 div 즉 부모에 접근해서 삭제
//그러기 위해선 input의 attribute 속성과 div의 id이름이 일치
//일치시키기 위해선 data-*이라는 신규 속성 추가
})
! 문제 인지 !
[getattribute 접근]
ar.push(document. getAttribute("data-del-num"))
- 선언자가 아닌 document 자체에 접근
[배열 내부 값 추가]
ar = c1[i].getAttribute("data-del-num")
- push()함수를 사용하지 않는 문제
[이벤트 핸드링과 함수 / for문 적용 문제]
for(let i=0;i<c1.length;i++) {
c1[i].addEventListener("click", function(){
let flag = true;
for(let j=0;j<c1.length;j++) { /
if(!c1[i].checked) {
flag = false;
break;
}
}
checkAll.checked = flag;
})
}
- c1[i]를 사용하면 "현재 클릭된 체크박스만 검사"하므로 전체 체크박스의 상태를 반영하지 못함
(function과 그 내부 for문을 별도로 생각하는 연습 필요)
- c1[j]를 사용하면 모든 체크박스를 검사하여 checkAll의 상태를 정확하게 반영할 수 있음
(for문 내부를 모두 돌며, 체크 박스의 확인 유무를 판단하기 때문)
728x90
'JS > [문제해결]' 카테고리의 다른 글
| [국비] 배열 및 반복문(for문)_체크 박스 동기화 (0) | 2024.05.25 |
|---|---|
| [국비] for문 활용_문자열 누적 (0) | 2024.05.25 |
| [국비] 조건문(if/else if) 및 반복문(for)문 활용_prompt 연산자, 분/초 출력 (0) | 2024.05.20 |