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

25761 ワード
JavaScript javascript30 テキストリンク

☑️ 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.すべてのチェックボックスを見つけます。

document.querySelectorAll('.inbox input[type="checkbox"]');
Input typeがチェックボックスのすべてのタグを検索します.

👉 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を押すイベントが発生し、選択されている場合は、これらのチェックボックスを迂回して、最初のクリックと最後のクリックの間のすべてのチェックボックスをチェックします.
falseをinBetweenに割り当て、shiftキーを押すと条件文を実行します.
最初にボタンを押すと、inBetweenがtrueになり、サブコンテンツがチェックされます.
① 
if(e.shiftKey && this.checked) { ~~~ }
②
if(checkbox === this || checkbox === lastChecked){
    inBetween = !inBetween;
}
③
if(inBetween){
	checkbox.checked = true;
}
shiftイベントが初めて発生した場合

👉 3.clickイベントを追加し、関数を呼び出します。

checkboxes.forEach(checkbox => checkbox.addEventListener('click' , handleCheck));
➕
css線効果を与えるもの.
input:checked + p {
    background: #F9F9F9;
    text-decoration: line-through;
}
選択したpにline-throughを付けると、スクライブの効果が得られます.
sdut 3345ハフマン符号化&&優先キュー
[BOJ/C+]#1260 DFSとBFS