Javascript30 - shift누른 채로 체크 박스 클릭시 그사이의 체크박스 전부 체크되는 미니플젝

체크박스 하나를 체크한 상태에서 쉬프트를 누른 채로 체크박스를 체크하면 그 사이의 모든 체크박스가 체크되게 하는 코드를 작성해보았다.

 

결과물

 

작업 과정

1. 윈도우에서 키입력을 감지한다.

 - 쉬프트키가 keydown 되었을 때 isHoldingShift 값을 true로 하고 shift함수를 호출한다.

 - 쉬프트키가 keyup 되었을 때 isHoldingShift 값을 false로 한다.

2. shift 함수에서는 각각의 체크박스의 클릭을 감지해서 클릭이 일어나면 doChecking 함수를 실행한다.

3. doChecking 함수에서는 isHoldingShift값이 false면 리턴하고, 아닌 경우에 체크되지 않은 체크박스를 checkedBox 배열에 저장한 후

4. checkedBox에 사용자가 shift를 누른 채로 클릭한 체크박스의 인텍스를 받아서 index에 넣는다.

5. 세가지 경우로 나눠서, checkedBox의 길이가 1인 경우 리턴하고, index값이 0인 경우 아래에서부터 체크하고, 0이 아닌 경우에는 위에서부터 체크되게 작성 

    <script>
        let isHoldingShift = true;
        const inputs = Array.from(document.querySelectorAll('input'));

        function shifting(e) {
            console.log(e);
            console.log(isHoldingShift);

            if(!isHoldingShift) {
                return ;
            }
            inputs.forEach(input=>{
            input.addEventListener('click',doChecking);
        });
        }

        function doChecking(e) {
            if (!isHoldingShift) {
                return;
            }
            
            let checkedBox = Array.from(inputs.filter(input => input.checked === true));
            console.log(checkedBox);
                let index = checkedBox.findIndex(element=>element.id === e.target.id);
                console.log(index);
        
                if (checkedBox.length === 1) {
                    return;
                }

                // 밑에서부터 선택될 때
                if (index === 0) {

                    for (let i = checkedBox[index].id;i<checkedBox[index+1].id;i++) {
                    const input = document.getElementById(`${i}`);
                    input.checked = true;
                    }
                    return;
                }

                // 위에서부터 선택될 때
                for (let i = checkedBox[index-1].id;i<checkedBox[index].id;i++) {
                    console.log(i);
                    const input = document.getElementById(`${i}`);
                    input.checked = true;
                }
        }

        window.addEventListener('keydown',(e) => {
            if (e.key === 'Shift') {
                isHoldingShift = true;
                shifting(e);
            }
        });
        window.addEventListener('keyup',()=>{
            console.log('hi');
            isHoldingShift = false;
            console.log(isHoldingShift);
        });

    </script>