본문 바로가기
개발공부/개발하다_발견함

아직도 익스플로러를 쓰는 충격적인 기관이 있다?!

by 맙소사 2021. 11. 30.

응 우리나라야~ (ㅋㅋ)

각설하고, 체크박스 전체선택 기능을 넣어야 하는데 촉박한 시간 탓에 그냥 구글링한 코드 갖다 슥 긁어다 놨더니

이럴수가! 충격! 크롬과 엣지에서는 되는데 익스플로러에서는 동작하지 않는 일이 발생했다!

1
2
3
4
5
6
7
function selectAll(selectAll)  {
    var checkboxes = document.getElementsByName('sbizSeqList');
        
    checkboxes.forEach((checkbox) => {
        checkbox.checked = selectAll.checked;
    })
}
cs

문제의 코드는 위와 같이 생겼다.

그런데 익스플로러에서 저 forEach부분 인식을 못 한다 왜지? 그래서 헐레벌떡 수정을 했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
function selectAll(selectAll)  {
    var checkboxes = document.getElementsByName('sbizSeqList');
        
    if(checkboxes[0].checked == false ){    
        for(var i = 0 ; i < checkboxes.length ; i++){
            checkboxes[i].checked = true;
        }    
    } else {
        for(var i = 0 ; i < checkboxes.length ; i++){
            checkboxes[i].checked = false;
        }    
    } 
}
cs

그런데 만들고 나니까 전체선택 한 다음 전체취소는 안되는거임... 그래서 그냥 급하게 대충 첫번째 칸이 체크되지 않았을 경우만 저렇게 해줬는데, 아뿔싸! 전체선택 체크박스를 두 세번 정도 선택하고나면? 체크박스 true false가 뒤바뀌는 현상이 벌어짐<ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아놔 ㅠ 진짜 로직고민할 시간도 없이 이렇게 헐레벌떡 얼레벌레 돌아가는 코드설계 정말 괴롭고 고통스럽다. 발전? 허둥지둥 메꿔놓는게 발전이라면 정말 달갑지 않음... 그래서 이제 지금부터 생각을 해볼것임... 당장 화면에 문제가 바로 보이는건 아니니까 항의가 늦게 올 것임... 찰나의 시간을 벌었으니까 고민을 해보자... 하자마자 그냥 위에 있는 forEach 를 그대로 썼음. 진작 이렇게 하지... ...나 바본가?

1
2
3
4
5
6
7
8
function selectAll(selectAll)  {
    var selectAllCkb = document.getElementById('selectAllCkb');
    var checkboxes = document.getElementsByName('sbizSeqList');
             
    for(var i = 0 ; i < checkboxes.length ; i++){
        checkboxes[i].checked = selectAllCkb.checked;
    }     
}
cs

전체선택하는 체크박스에 아이디를 준 다음 나머지 체크박스를 전체선택 체크박스와 true false를 맞춰줌.

끝.

 

 

 

 

 

댓글