Skip to content

Commit bc429e9

Browse files
anwesh08anwesh08
committed
Multiple CheckBox
1 parent 0ce157d commit bc429e9

3 files changed

Lines changed: 119 additions & 0 deletions

File tree

‎10-Check Multiple CheckBox/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Hold Shift to Check Multiple CheckBoxes</title>
8+
</head>
9+
<link rel="stylesheet" href="style.css">
10+
<body>
11+
<div class="inbox">
12+
<div class="item">
13+
<input type="checkbox">
14+
<p>This is an inbox layout.</p>
15+
</div>
16+
<div class="item">
17+
<input type="checkbox">
18+
<p>Hold down your Shift Key.</p>
19+
</div>
20+
<div class="item">
21+
<input type="checkbox">
22+
<p>Check one item.</p>
23+
</div>
24+
<div class="item">
25+
<input type="checkbox">
26+
<p>Check a lower item.</p>
27+
</div>
28+
<div class="item">
29+
<input type="checkbox">
30+
<p>Everything in between should also be set to checked.</p>
31+
</div>
32+
<div class="item">
33+
<input type="checkbox">
34+
<p>Try do it without any libraries.</p>
35+
</div>
36+
<div class="item">
37+
<input type="checkbox">
38+
<p>Just regular JavaScript.</p>
39+
</div>
40+
<div class="item">
41+
<input type="checkbox">
42+
<p>Good Luck!</p>
43+
</div>
44+
<div class="item">
45+
<input type="checkbox">
46+
<p>Don't forget to tweet your result!</p>
47+
</div>
48+
</div>
49+
<script src="script.js"></script>
50+
</body>
51+
</html>

‎10-Check Multiple CheckBox/script.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
2+
3+
let lastChecked;
4+
5+
function handleChecked(e) {
6+
// Check if they had the shift key down
7+
// AND check that they are checking it
8+
let inBetween = false;
9+
if (e.shiftKey && this.checked) {
10+
// go ahead and do what we please
11+
// loop over every single checkbox
12+
checkboxes.forEach(checkbox => {
13+
console.log(checkbox);
14+
if (checkbox === this || checkbox === lastChecked) {
15+
inBetween = !inBetween;
16+
console.log('Starting to check them in between!');
17+
}
18+
if (inBetween) {
19+
checkbox.checked = true;
20+
}
21+
});
22+
}
23+
lastChecked = this;
24+
}
25+
26+
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleChecked));

‎10-Check Multiple CheckBox/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
html {
2+
font-family: sans-serif;
3+
background: #ffc600;
4+
}
5+
6+
.inbox {
7+
max-width: 400px;
8+
margin: 50px auto;
9+
background: white;
10+
border-radius: 5px;
11+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
12+
}
13+
14+
.item {
15+
display: flex;
16+
align-items: center;
17+
border-bottom: 1px solid #f1f1f1;
18+
}
19+
20+
.item:last-child {
21+
border-bottom: 0;
22+
}
23+
24+
input:checked + p {
25+
background: #f9f9f9;
26+
text-decoration: line-through;
27+
}
28+
29+
input[type="checkbox"] {
30+
margin: 20px;
31+
}
32+
33+
p {
34+
margin: 0;
35+
padding: 20px;
36+
transition: background 0.2s;
37+
flex: 1;
38+
font-family: 'Courier New', Courier, monospace;
39+
font-size: 16px;
40+
font-weight: 200;
41+
border-left: 1px solid #d1e2ff;
42+
}

0 commit comments

Comments
 (0)