Skip to content

Commit 3759c02

Browse files
JeffDessJeffDess
committed
Added Hold Shift to Check Multiple (wesbos#10)
1 parent 4115675 commit 3759c02

File tree

1 file changed

+110
-91
lines changed

1 file changed

+110
-91
lines changed

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

Lines changed: 110 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,123 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Hold Shift to Check Multiple Checkboxes</title>
5+
<meta charset="UTF-8">
6+
<title>Hold Shift to Check Multiple Checkboxes</title>
67
</head>
7-
<body>
8-
<style>
9-
10-
html {
11-
font-family: sans-serif;
12-
background:#ffc600;
13-
}
14-
15-
.inbox {
16-
max-width:400px;
17-
margin:50px auto;
18-
background:white;
19-
border-radius:5px;
20-
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
21-
}
22-
23-
.item {
24-
display:flex;
25-
align-items:center;
26-
border-bottom: 1px solid #F1F1F1;
27-
}
28-
29-
.item:last-child {
30-
border-bottom:0;
31-
}
328

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-
54-
55-
</style>
56-
<!--
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-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+
<!--
5755
The following is a common layout you would see in an email client.
5856
5957
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.
6058
6159
-->
62-
<div class="inbox">
63-
<div class="item">
64-
<input type="checkbox">
65-
<p>This is an inbox layout.</p>
60+
<div class="inbox">
61+
<div class="item">
62+
<input type="checkbox">
63+
<p>This is an inbox layout.</p>
64+
</div>
65+
<div class="item">
66+
<input type="checkbox">
67+
<p>Check one item</p>
68+
</div>
69+
<div class="item">
70+
<input type="checkbox">
71+
<p>Hold down your Shift key</p>
72+
</div>
73+
<div class="item">
74+
<input type="checkbox">
75+
<p>Check a lower item</p>
76+
</div>
77+
<div class="item">
78+
<input type="checkbox">
79+
<p>Everything inbetween should also be set to checked</p>
80+
</div>
81+
<div class="item">
82+
<input type="checkbox">
83+
<p>Try do it with out any libraries</p>
84+
</div>
85+
<div class="item">
86+
<input type="checkbox">
87+
<p>Just regular JavaScript</p>
88+
</div>
89+
<div class="item">
90+
<input type="checkbox">
91+
<p>Good Luck!</p>
92+
</div>
93+
<div class="item">
94+
<input type="checkbox">
95+
<p>Don't forget to tweet your result!</p>
96+
</div>
6697
</div>
67-
<div class="item">
68-
<input type="checkbox">
69-
<p>Check one item</p>
70-
</div>
71-
<div class="item">
72-
<input type="checkbox">
73-
<p>Hold down your Shift key</p>
74-
</div>
75-
<div class="item">
76-
<input type="checkbox">
77-
<p>Check a lower item</p>
78-
</div>
79-
<div class="item">
80-
<input type="checkbox">
81-
<p>Everything inbetween should also be set to checked</p>
82-
</div>
83-
<div class="item">
84-
<input type="checkbox">
85-
<p>Try do it with out any libraries</p>
86-
</div>
87-
<div class="item">
88-
<input type="checkbox">
89-
<p>Just regular JavaScript</p>
90-
</div>
91-
<div class="item">
92-
<input type="checkbox">
93-
<p>Good Luck!</p>
94-
</div>
95-
<div class="item">
96-
<input type="checkbox">
97-
<p>Don't forget to tweet your result!</p>
98-
</div>
99-
</div>
10098

101-
<script>
102-
</script>
99+
<script>
100+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
101+
let lastCb;
102+
103+
function handleCheck(e) {
104+
let inBetween = false;
105+
if (e.shiftKey && this.checked) {
106+
checkboxes.forEach(cb => {
107+
if (cb === this || cb === lastCb) {
108+
inBetween = !inBetween;
109+
}
110+
111+
if (inBetween) {
112+
cb.checked = true;
113+
}
114+
});
115+
}
116+
lastCb = this;
117+
}
118+
119+
checkboxes.forEach(cb => cb.addEventListener('click', handleCheck));
120+
</script>
103121
</body>
104-
</html>
122+
123+
</html>

0 commit comments

Comments
 (0)