728x90
반응형
1. 기본
하나를 클릭하고 shift 누른상태에서 다른하나를 클릭하면 그 사이의 체크박스들에 체크가 되게한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hold Shift to Check Multiple Checkboxes</title>
</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>
</script>
</body>
</html>2. 결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hold Shift to Check Multiple Checkboxes</title>
</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 checkbox = document.querySelectorAll(".item input");
let forFindeIndex = [];
let lastIndex;
let shiftBtnOn;
function shiftClick(callback) {
checkbox.forEach((el, index) => {
if (el.checked) {
forFindeIndex.push(index);
forFindeIndex.sort((a, b) => {
a - b;
});
}
});
//forEach문이 다 돌아간뒤 처리하기하기 위해 콜백
callback();
}
function checkBox() {
//클릭한게 젤 앞일때
if (forFindeIndex[0] == lastIndex) {
for (let i = forFindeIndex[0]; i < forFindeIndex.at(-1); i++) {
checkbox[i].checked = true;
}
}
//클릭한게 젤앞이 아닐때
else {
for (let i = forFindeIndex[0]; i < lastIndex; i++) {
checkbox[i].checked = true;
}
}
forFindeIndex = [];
}
//main function
window.onkeydown = function (event) {
//shift keyCode = 16
shiftBtnOn = true;
if (event.keyCode == 16) {
checkbox.forEach((el, index) => {
el.onclick = function () {
if (shiftBtnOn) {
lastIndex = index;
shiftClick(checkBox);
} else {
return;
}
};
});
}
};
window.onkeyup = function (event) {
if (event.keyCode == 16) {
shiftBtnOn = false;
}
};
</script>
</body>
</html>3. 리뷰
처음에 forEach문 뒤에 코드를 작성했을때 값이 다 안담기는 현상이 발생했다.
그래서 이 문제를 해결하기 위해 콜백을 썼다.
728x90
반응형
'개발 > html, css, js' 카테고리의 다른 글
| [30일 챌린지 Day-13] scroll event (0) | 2022.08.09 |
|---|---|
| [30일 챌린지 Day-12] hidden key (2) | 2022.08.09 |
| [30일 챌린지 Day-8] 무지개 canvas (0) | 2022.08.09 |
| [JS] 쿠키와 세션 (0) | 2022.08.09 |
| [JS] 쿠키와 세션 (0) | 2022.08.08 |