코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hold Shift to Check Multiple Checkboxes</title>
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<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>
<!--
The following is a common layout you would see in an email client.
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
-->
<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>
<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
let lastChecked;
function handleCheck(e) {
// shift 키가 눌러져 있는지 체크
let inBetween = false;
if (e.shiftKey && this.checked) {
// shift가 눌러져 있고 this가 checked 상태라면 각 checkbox에 루프
checkboxes.forEach((checkbox) => {
// 현재 돌고 있는 checkbox와 this가 같거나
// 현재 돌고 있는 checkbox와 lastChecked와 같으면 inBetween값 전환
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
// 처음에는 checkbox === lastChecked이기 때문에 inBetween 값이 true로 전환
// 그리고 다음 checkbox들은 inBetween 값이 켜져 있기 때문에 check 됨
// 마지막으로 checkbox === this에 도달하면서 inBetween 값이 false로 전환
// 나머지는 inBetween 값이 꺼져 있기 때문에 check 안됨
if (inBetween) {
checkbox.checked = true;
}
});
}
// shift를 누르기 전 처음 클릭하는 checkbox input 요소 할당
lastChecked = this;
}
checkboxes.forEach((checkbox) =>
checkbox.addEventListener("click", handleCheck)
);
</script>
</body>
</html>결과
가장 어려워 하는 '기록'하기