checkbox-AllCheck(javascript)

**HTML

    <div class="checkbox-container">
        <div>
            <input type='checkbox' name='selectall' id="selectBtn" onclick='selectAll(this)' />
            <label for="selectBtn">전체</label>
        </div>

        <div>
            <input type='checkbox' name='selectBtn' id="selectBtn1" onclick='checkSelectAll()' />
            <label for="selectBtn1">선택1</label>
        </div>

        <div>
            <input type='checkbox' name='selectBtn' id="selectBtn2" onclick='checkSelectAll()' />
            <label for="selectBtn2">선택2</label>
        </div>

        <div>
            <input type='checkbox' name='selectBtn' id="selectBtn3" onclick='checkSelectAll()' />
            <label for="selectBtn3">선택3</label>
        </div>
    </div>

 

**SCRIPT

        function checkSelectAll() {
            // 전체 체크박스
            const checkboxes = document.querySelectorAll('input[name="selectBtn"]'); 
            
            // 선택된 체크박스
            const checked = document.querySelectorAll('input[name="selectBtn"]:checked');
            
            // select all 체크박스
            const selectAll = document.querySelector('input[name="selectall"]');

            if (checkboxes.length === checked.length) {
                selectAll.checked = true;
            } else {
                selectAll.checked = false;
            }

        }

        function selectAll(selectAll) {
//또는 const checkboxes = document.getElementsByName('selectBtn'); 
            const checkboxes = document.querySelectorAll('input[name="selectBtn"]');

            checkboxes.forEach((checkbox) => {
                checkbox.checked = selectAll.checked
            })
        }