[JavaScript] checkbox 전체 체크 (동적으로 생성된 checkbox도 적용하기)

*개인 기록용이며 부족한 부분이 있을 수 있습니다.

 

동일한 name 값을 가진 checkbox를 전체 체크 및 전체 체크 해제하는 checkbox를 만드려고 한다. (이하 checkAllBtn)

이때 추가로 다른 checkbox를 체크해제하면 checkAllBtn은 check 해제 처리하고자 한다.

 

결과 모습은 아래와 같다.

 

/* 전체선택 checkbox */
function checkAllBoxes() {
    let checkboxes = document.getElementsByName(this.getAttribute('name'));
      checkboxes.forEach((checkbox) => {
        checkbox.checked = this.checked;
    })
}
/* 개별선택 checkbox */
function checkOneBox(box) {
    let checkAllBtn = document.getElementById(box.getAttribute('name')+'CheckAll');
    console.log(box)
    if ( box.checked == false ) {
        // 전체 체크 해제
        checkAllBtn.checked = false;
    }
}

 

checkAllBoxes(): checkAllBtn을 체크할때 실행될 함수이고

checkOneBox(): 이외에 개별 checkbox를 체크할 때 실행

( checkAllBoxes 의 ID는 '공통 name 값'+ CheckAll 로 한다.)

 

함수는 onclick이 아닌 eventListener 방식으로 하려고 하는데

개별 checkbox에 특정 class를 부여하고 eventListener를 추가하고자 한다면 아래와 같이 querySeletorAll과 forEach문을 사용할 수 있다.

(예시: tab 클래스의 요소를 클릭하면 openTab 함수를 실행한다.)

let tabs = document.querySelectorAll(".tab");
tabs.forEach((tab) => {
    tab.addEventListener('click', openTab);
});

 

/* eventListener */
document.getElementById('rgntCheckAll').addEventListener('click', checkAllBoxes);
document.getElementById('rgntHTbl').addEventListener('click', function(e){
    if ( e.target && e.target.classList.contains('rgnt_check') ){
        console.log('c!')
        checkOneBox(e.target);
     }
 });

 

맨 위 함수에서 checkAllBoxes는 this를, checkOneBox는 별도 인자를 사용한 이유가 여기 있다.

checkOneBox의 this는 테이블(# rgntHTbl )이 된다.