-
Notifications
You must be signed in to change notification settings - Fork 5
/
checkBoxes.jade
41 lines (30 loc) · 1.34 KB
/
checkBoxes.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
extends base
block vars
- var title = 'Shift and Check Multiple Boxes'
block styles
link(rel="stylesheet" type="text/css" href="styles/checkBoxes.css")
block body
- var lists = ["This is an inbox layout.", "Check one item", "Hold down your shift key", "Check a lower item", "Everything in between should also be set to checked", "Try to do it with out any libraries", "Just regular Javascript", "Good Luck!", "Don't forget to tweet your result!"]
h4 The following is a common layout you would see in an email client. When a user clicks a <strong>checkbox</strong>, holds <strong>Shift</strong>, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
.inbox
each list in lists
.item
label.label--checkbox
input(type="checkbox")
p #{list}
script(type="text/javascript").
const $inputs = document.querySelectorAll('input[type="checkbox"]')
let lastInput
function handler(e) {
let inBetween = false
if (e.shiftKey && this.checked) {
$inputs.forEach(input => {
if (input === this || input === lastInput) inBetween = !inBetween
if (inBetween) input.checked = true
})
}
lastInput = this
}
$inputs.forEach(($input, index) => {
$input.addEventListener('click', handler)
})