[JavaScript30] ☑️ 10. Hold Shift to Check Multiple Checkboxes

25722 단어 JavaScriptjavascript30JavaScript

☑️ 10. Hold Shift to Check Multiple Checkboxes

shift키로 체크박스를 동시에 체크 할 수 있는 기능을 추가하는 것

초기 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Hold Shift to Check Multiple Checkboxes</title>
</head>
<div>
    <style>
        html {
      font-family: sans-serif;
      background: #ffc600;
    }

    .inbox {
        max-width: 400px;
        margin: 50px auto;
        background: white;
        border-radius: 5px;
        box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
    }

    .item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F1F1;
    }

    .item:last-child {
        border-bottom: 0;
    }

    input:checked + p {
        background: #F9F9F9;
        text-decoration: line-through;
    }

    input[type="checkbox"] {
        margin: 20px;
    }

    p {
        margin: 0;
        padding: 20px;
        transition: background 0.2s;
        flex: 1;
        font-family:'helvetica neue';
        font-size: 20px;
        font-weight: 200;
        border-left: 1px solid #D1E2FF;
    }
    </style>
    <div class="inbox">
        <div class="item">
            <input type="checkbox">
            <p>This is an inbox layout.</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Check one item</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Hold down your Shift key</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Check a lower item</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Everything in between should also be set to checked</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Try to do it without any libraries</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Just regular JavaScript</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Good Luck!</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Don't forget to tweet your result!</p>
        </div>
        </div>
    </div>
</body>
</html>


초기화면

🌏 과정

👉 1. checkbox들을 모두 찾음.

document.querySelectorAll('.inbox input[type="checkbox"]');

input type이 checkbox인 모든 태그를 찾음.

👉 2. 함수 생성

let lastChecked;

function handleCheck(e){
    // Check if they had the shift key down
    // AND check that they are checking it
    let inBetween = false;
    if(e.shiftKey && this.checked) {
        // go ahead and do what we please
        // loop over every single checkbox
        checkboxes.forEach(checkbox =>{
            console.log(checkbox);
            if(checkbox === this || checkbox === lastChecked){
                inBetween = !inBetween;
                console.log('Starting to check them inbetween');
            }

            if(inBetween){
                checkbox.checked = true;
            }
        })
    }

    lastChecked = this;
}

shiftkey를 누르는 이벤트가 발생하고, checked상태면 checkbox들을 돌면서 처음 클릭한 것과 마지막 클릭한것사이의 모든 체크박스들을 체크함.

inBetween에 false를 할당하고, 만약 shift키를 누르고, 누른것이 체크되있다면 조건문을 실행한다.

처음 버튼을 누를 때 inBetween이 true가 되고, 하위 내용들을 체크한다.

① 

if(e.shiftKey && this.checked) { ~~~ }

②

if(checkbox === this || checkbox === lastChecked){
    inBetween = !inBetween;
}

③

if(inBetween){
	checkbox.checked = true;
}

처음 shift event발생 시

👉 3. click이벤트를 추가하며 함수 호출.

checkboxes.forEach(checkbox => checkbox.addEventListener('click' , handleCheck));

➕

css줄효과 준것.

input:checked + p {
    background: #F9F9F9;
    text-decoration: line-through;
}

checked된 p에 line-through를 줘서 줄긋는 효과가 생김.

2021/1/11 깃워크플로-🌊
[BOJ / C++] #1260 DFS와 BFS

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage