[JS] - 체크박스 제어 (전체 선택 해제 응용)

// 1. 상위 제어 체크박스가 있다

// 2. 상위 제어에 따라 전체 선택 해제가 되는 하위체크박스 그룹이 있다

// (각 상위 체크박스는 하나의 하위체크박스 그룹이 있음)

// 3. 하위 체크박스의 선택에 따라 상위 체크박스를 변경한다

// 예시 상위 체크박스에는 포유류, 조류가 있고

// 포유류에는 [ 원숭이, 사자, 호랑이, 표범, 코끼리, 기린 ] 이있다

// 조류에는 [ 닭, 벌새, 까치, 까마귀, 참새, 비둘기 ] 가 있다

// 1. 여기서 원숭이를 선택하면 포유류와 원숭이가 선택되고 사자를 선택하면 사자가 선택된다

// 다른 항목인 닭을 선택하게 되면 포유류, 원숭이, 사자에 체크가 해제되고 조류, 닭이 선택된다

// 2. 원숭이, 사자, 호랑이를 선택하면 포유류, 원숭이, 사자, 호랑이에 선택되고

// 여기서 조류를 선택하면 이전의 포유류 선택이 해제되고 조류가 선택된다

// 이러한 구조를 지닌 로직을 만들어보자

// 상위 체크박스에 실행한다

function checkbox1 (otherName, otherAll) {

    let checkboxes = document.querySelectorAll(`input[name="${otherName}"]`);

    document.getElementById(otherAll).checked = false;

    checkboxes.forEach((checkbox) => {

        checkbox.checked = false;

    });

}

// 하위 체크박스에 실행한다

function checkbox2 (otherName, usAll, otherAll) {

    let checkboxes = document.querySelectorAll(`input[name="${otherName}"]`);

    document.getElementById(usAll).checked = true;

    if(document.getElementById(otherAll).checked){

        document.getElementById(otherAll).checked = false;

        checkboxes.forEach((checkbox) => {

            checkbox.checked = false;

        });

    }

}