Skip to content

Commit 5c2f933

Browse files
pbrdmnpbrdmn
committed
10 - Shift-click to select a range of inputs
1 parent aa8e6e5 commit 5c2f933

1 file changed

Lines changed: 136 additions & 0 deletions

File tree

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Hold Shift to Check Multiple Checkboxes</title>
7+
</head>
8+
9+
<body>
10+
<style>
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-allItems: center;
27+
border-bottom: 1px solid #F1F1F1;
28+
-webkit-touch-callout: none;
29+
-webkit-user-select: none;
30+
-khtml-user-select: none;
31+
-moz-user-select: none;
32+
-ms-user-select: none;
33+
user-select: none;
34+
}
35+
36+
.item:last-child {
37+
border-bottom: 0;
38+
}
39+
40+
41+
input:checked+p {
42+
background: #F9F9F9;
43+
text-decoration: line-through;
44+
}
45+
46+
input[type="checkbox"] {
47+
margin: 20px;
48+
}
49+
50+
p {
51+
margin: 0;
52+
padding: 20px;
53+
transition: background 0.2s;
54+
flex: 1;
55+
font-family: 'helvetica neue';
56+
font-size: 20px;
57+
font-weight: 200;
58+
border-left: 1px solid #D1E2FF;
59+
}
60+
</style>
61+
<!--
62+
The following is a common layout you would see in an email client.
63+
64+
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.
65+
66+
-->
67+
<div class="inbox">
68+
<label class="item">
69+
<input type="checkbox">
70+
<p>This is an inbox layout.</p>
71+
</label>
72+
<label class="item">
73+
<input type="checkbox">
74+
<p>Check one item</p>
75+
</label>
76+
<label class="item">
77+
<input type="checkbox">
78+
<p>Hold down your Shift key</p>
79+
</label>
80+
<label class="item">
81+
<input type="checkbox">
82+
<p>Check a lower item</p>
83+
</label>
84+
<label class="item">
85+
<input type="checkbox">
86+
<p>Everything inbetween should also be set to checked</p>
87+
</label>
88+
<label class="item">
89+
<input type="checkbox">
90+
<p>Try do it without any libraries</p>
91+
</label>
92+
<label class="item">
93+
<input type="checkbox">
94+
<p>Just regular JavaScript</p>
95+
</label>
96+
<label class="item">
97+
<input type="checkbox">
98+
<p>Good Luck!</p>
99+
</label>
100+
<label class="item">
101+
<input type="checkbox">
102+
<p>Don't forget to tweet your result!</p>
103+
</label>
104+
</div>
105+
106+
<script>
107+
var prevItem = null
108+
var allItems = document.querySelectorAll('.inbox input[type="checkbox"]')
109+
110+
function clickItem(e) {
111+
console.log(e)
112+
const { shiftKey } = e
113+
let inBetween = false;
114+
const nextState = this.checked
115+
console.log(nextState)
116+
117+
if (shiftKey) {
118+
allItems.forEach(item => {
119+
if (item === this || item === prevItem) {
120+
inBetween = !inBetween;
121+
}
122+
123+
if (inBetween) {
124+
item.checked = nextState;
125+
}
126+
});
127+
}
128+
129+
prevItem = this
130+
}
131+
132+
allItems.forEach(item => item.addEventListener('click', clickItem))
133+
</script>
134+
</body>
135+
136+
</html>

0 commit comments

Comments
 (0)