[문제 1]
- 맨 첫번째 체크 박스를 클릭하면 나머지 박스들이 모두 선택되고,
맨 첫번째 체크 박스를 해제하면 나머지 박스들이 모두 해제되게 구현
- 모두 체크된 상태에서 한 가지 체크 박스를 해제하면 맨 첫번째 체크 박스 클릭이 해제되고,
체크가 없는 상태에서 모든 체크 박스를 선택하면 맨 첫번째 체크 박스 클릭이 되도록 구현
<script>
const checkAll = document.getElementById("checkAll");
const box = document.getElementsByClassName("box");
//첫번째 외 체크박스 선택시 첫번째 체크박스 선택 && 외 선택 해제시 첫번쨰 체크박스 해제
for(let i=0; i < box.length ; i++) {
box[i].addEventListener("click", function(){
let count = 0;
for(let j=0; j<box.length; j++) {
if(box[j].checked) {
count += 1;
}
}
if(count >= 4) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
})
}
//첫번째 박스체크하고 클릭 누르면 나머지도 체크 & 첫번쨰 누르면 모두 해제
function push() {
if (checkAll.checked) {
for(let i=0; i<4 ; i++) {
box[i].checked = checkAll.checked;
}
} else {
for(let i=0; i<4 ; i++) {
box[i].checked = checkAll.checked;
}
}
}
</script>
| 문제 인지 | |
| 루프와 조건문 조합 | - 체크 박스 집계 및 누적 접근 방식 고민 (체크박스 동기화) - for 루프와 조건문 결합 |
| 이벤트 핸들링과 함수 | - 이벤트 핸들러 내부 for 루프 구현 - 이벤트 핸들러가 언제 발생하는지에 대한 인지 - 이벤트 핸들러가 적용되고, 이를 실행할 때 값들이 변경되는 문제를 인지하지 못함 - 이벤트 핸들러와 별개로 체크박스를 고민하지 못하는 문제 |
※ 구문별로 나누어 코드 작성 후 결합 진행
[접근 로직]
function result() {
//증가할떄도 호환가능할 수 있도록 구성
let count = 0;
for(let i=0; i<box.length; i++) { //클릭(체크와 해제)하면 루프가 한바퀴 도는 것
if(box[i].checked) { //체크박스에 체크가 된다면
count += 1; //result에 숫자가 저장
}
}
//console.log("result = " + count); //--> for구문에서 발생한 체크 박스 내역
//만약 count 즉 체크박스 4개일시 전체 체크 원함
if(count >= 4) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
}
[접근 로직 2]
<script>
const checkAll = document.getElementById("checkAll");
const c1 = document.getElementsByClassName("c1");
//체크박스가 모두 선택될 때 하나를 해제하면 전체도 해제
for (let i=0; i <c1.length;i++) {
c1[i].addEventListener("click", function() { //버튼한개에 체크할 시 -> 루프가 있음을 생각 하지말 것
//위와 별개로 아래부터 새로 그림을 그린다고 생각하는게 좋음
let count = 0;
for(let j=0;j<c1.length;j++) {
if(c1[j].checked) { //c1[i]는 --> 이벤트 핸들러가 check되었을떄 기준!
//따라서 체크박스 내를 검증하고, 체크박스가 check되었을 때 검증하기 위해선 loop 키워드를 이용
count += 1; //count++과 동일하다.
}
}
if(count >= 4) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
//count = 0;
//이벤트 리스너를 통해서 다시 초기화 상태로 가기 때문에 리셋 시킬 필요가 없다.
})
}
</script>
! 문제 인지 !
[모두 체크 되었을 때, 체크 박스 해제]
for(let i=0; i < box.length ; i++) {
box[i].addEventListener("click", function(){
if(box[0].checked && box[1].checked && box[2].checked && box[3].checked){
all.checked = true;
} else {
all.checked = false;
}
})
}
- for 구문을 활용하지 않는 문제 및 새로운 check박스 추가 시 재사용성이 어려운 문제
[클릭이 4번 이상 되었을 때, 모두 체크]
for(let i=0; i < box.length ; i++) {
box[i].addEventListener("click", function(){
let count = 1;
if (box[i].checked) {
count++;
}
if (count >= 4) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
})
}
- 체크박스 유무와 관련없이 오직 클릭이 4번 이상이면, check가 되는 문제가 발생
[for루프 내 조건]
for (let i=0; i <c1.length;i++) {
c1[i].addEventListener("click", function() {
let count = 0;
for(let j=0;j<c1.length;j++) {
if(c1[i].checked) {
count += 1;
}
}
- '이벤트가 발생되는 체크버튼을 클릭했을 때'와 '체크 박스 중에 클릭된 것이 있을 때'의 조건을 구분하지 못하는 문제
- 어떤 조건을 사용하는 것이 적절한지 판단하지 못함
[선생님 작성 코드]
for(let i=0;i<ch.length;i++){
ch[i].addEventListener("click", function(){
//최종 결과물을 담을 변수
let flag=true;
//4개의 체크박스의 체크 유무를 판단
for(let j=0;j<ch.length;j++){
if(!ch[j].checked){
flag=false;
break;
}
}
//최종 결과물을 checkAll에 대입
checkAll.checked=flag;
})
}
- 더 유용
728x90
'JS > [문제해결]' 카테고리의 다른 글
| [국비] 배열 및 반복문(for)과 이벤트 위임 결합_삭제 버튼 (0) | 2024.05.26 |
|---|---|
| [국비] for문 활용_문자열 누적 (0) | 2024.05.25 |
| [국비] 조건문(if/else if) 및 반복문(for)문 활용_prompt 연산자, 분/초 출력 (0) | 2024.05.20 |