Skip to content

Commit a75b82c

Browse files
bgiobbebgiobbe
committed
Added script to check all boxes betweenn check and shift-check
1 parent a319417 commit a75b82c

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎10 - Hold Shift and Check Checkboxes/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hold Shift to Check Multiple Checkboxes</title>
6+
<link rel="icon" href="https://fav.farm/🔥" />
7+
</head>
8+
<body>
9+
<style>
10+
11+
html {
12+
font-family: sans-serif;
13+
background: #ffc600;
14+
}
15+
16+
.inbox {
17+
max-width: 400px;
18+
margin: 50px auto;
19+
background: white;
20+
border-radius: 5px;
21+
box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
22+
}
23+
24+
.item {
25+
display: flex;
26+
align-items: center;
27+
border-bottom: 1px solid #F1F1F1;
28+
}
29+
30+
.item:last-child {
31+
border-bottom: 0;
32+
}
33+
34+
input:checked + p {
35+
background: #F9F9F9;
36+
text-decoration: line-through;
37+
}
38+
39+
input[type="checkbox"] {
40+
margin: 20px;
41+
}
42+
43+
p {
44+
margin: 0;
45+
padding: 20px;
46+
transition: background 0.2s;
47+
flex: 1;
48+
font-family:'helvetica neue';
49+
font-size: 20px;
50+
font-weight: 200;
51+
border-left: 1px solid #D1E2FF;
52+
}
53+
</style>
54+
<!--
55+
The following is a common layout you would see in an email client.
56+
57+
When a user clicks a checkbox, holds Shift, and then clicks another
58+
checkbox a few rows down, all the checkboxes inbetween those two checkboxes
59+
should be checked.
60+
-->
61+
<div class="inbox">
62+
<div class="item">
63+
<input type="checkbox">
64+
<p>This is an inbox layout.</p>
65+
</div>
66+
<div class="item">
67+
<input type="checkbox">
68+
<p>Check one item</p>
69+
</div>
70+
<div class="item">
71+
<input type="checkbox">
72+
<p>Hold down your Shift key</p>
73+
</div>
74+
<div class="item">
75+
<input type="checkbox">
76+
<p>Check a lower item</p>
77+
</div>
78+
<div class="item">
79+
<input type="checkbox">
80+
<p>Everything in between should also be set to checked</p>
81+
</div>
82+
<div class="item">
83+
<input type="checkbox">
84+
<p>Try to do it without any libraries</p>
85+
</div>
86+
<div class="item">
87+
<input type="checkbox">
88+
<p>Just regular JavaScript</p>
89+
</div>
90+
<div class="item">
91+
<input type="checkbox">
92+
<p>Good Luck!</p>
93+
</div>
94+
<div class="item">
95+
<input type="checkbox">
96+
<p>Don't forget to tweet your result!</p>
97+
</div>
98+
</div>
99+
100+
<script>
101+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
102+
console.log(checkboxes);
103+
104+
checkboxes.forEach(cb => {
105+
cb.addEventListener('click', handleCbClick);
106+
});
107+
let lastCheckboxChecked = null;
108+
109+
function handleCbClick(e) {
110+
if (this.checked) {
111+
if (e.shiftKey && lastCheckboxChecked !== null) {
112+
console.log('Shift-check after check - clear lastCheckboxChecked')
113+
let isBetween = false;
114+
checkboxes.forEach(cb => {
115+
if (cb === lastCheckboxChecked || cb === this) {
116+
isBetween = !isBetween;
117+
}
118+
if (isBetween) { cb.checked = true; }
119+
});
120+
lastCheckboxChecked = null;
121+
} else {
122+
console.log('set lastCheckboxChecked');
123+
lastCheckboxChecked = this;
124+
}
125+
} else {
126+
console.log('uncheck - clear lastCheckboxChecked');
127+
lastCheckboxChecked = null;
128+
}
129+
}
130+
</script>
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)