[Javascript] 체크박스 전체 선택 기능.

순수 자바스크립트로 체크박스 전체선택 기능을 구현하는 방법을 기재하고자 한다.

 

추가로, 하위체크박스를 하나씩 전부 체크했을때 자동으로 전체선택 체크박스가 활성화되고 하위체크박스 중 하나라도 체크가 풀렸을 시 자동으로 전체선택 체크박스 활성화가 되도록 하는 기능도 추가하고자 한다.

 

전체선택 활성화시

전체선택 비활성화 시

 

const ALL_CHKBOX_EL = document.getElementById("allChkBox");
const CHKBOX_EL = document.querySelectorAll("input[name='lowerChkBox']");

//전체선택 체크박스
ALL_CHKBOX_EL.onclick = (e) => {
	const THIS_TARGET = e.currentTarget;
    
    CHKBOX_EL.forEach( (chkBoxEl) => {
    	if(THIS_TARGET.checked == true) {
        	chkBoxEl.checked = true;
        } else {
        	chkBoxEl.checked = false;
        }
    });
}

//하위체크박스
for(let i = 0; i < CHKBOX_EL.length; i++) {
	CHKBOX_EL[i].onclick = () => {
    	let checkedEl = document.querySelectorAll("input[name='lowerChkBox']:checked");
        
        if(checkedEl.length >= CHKBOX_EL.length) {
        	ALL_CHKBOX_EL.checked = true;
        } else {
        	ALL_CHKBOX_EL.checked = false;
        }
    }
}

 

간단하게 풀이하면,

전체선택 체크박스요소가 체크됐을때 querySelectorAll로 선언된 하위 체크박스를 forEach를 통해 전체를 돌면서 checked를 true 로 바꿔준다.

 

하위체크박스요소는 마찬가지로 for문으로 전체를 돌면서 체크된 것을 확인인 한 후 전체선택 체크박스 요소의 checkd를 ture,false를 지정해주는 방식이다.

 

제이쿼리가 아닌 바닐라 js로도 어렵지않지만 매우 자주 쓰는 기능을 구현 할 수 있다.