https://github.com/gerhynes/checkboxes
A page for working on checkbox selection. Built for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/checkboxes
checkbox-selection javascript javascript30
Last synced: about 2 months ago
JSON representation
A page for working on checkbox selection. Built for Wes Bos' JavaScript 30 course.
- Host: GitHub
- URL: https://github.com/gerhynes/checkboxes
- Owner: gerhynes
- Created: 2017-10-07T16:03:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-14T19:32:58.000Z (over 7 years ago)
- Last Synced: 2025-01-31T11:49:42.744Z (4 months ago)
- Topics: checkbox-selection, javascript, javascript30
- Language: HTML
- Homepage: https://gk-hynes.github.io/checkboxes/
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Hold Shift to Check Multiple Checkboxes](https://gk-hynes.github.io/checkboxes/)
A page for working on checkbox selection. Built for Wes Bos'
[JavaScript 30](https://javascript30.com/) course.
[](https://gk-hynes.github.io/checkboxes/)
## Notes
Select all the checkboxes, loop over them and listen for a click.
When a box is checked run the `handleCheck` function.
Create a variable, `lastChecked`, to log the first box that is checked so that when the second box is checked while shift is held down you can know what the last box was. At the end of the function set `lastChecked` to `this` so that it will refer to the most recently checked checkbox.
Check if the shift key is down and a box is being checked.
```js
if (e.shiftKey && this.checked) { run code }
```
Loop over every checkbox, look for the first one that was checked, start checking boxes, and stop checking when you hit the last box that was checked.
Don't try to figure out where in the DOM the checkboxes are, and which elements are inbetween. This is quite fragile.
Instead, create a variable `inBetween` and set it to `false`. When the loop reaches the first checked checkbox, set `inBetween` to `true` and start checking checkboxes. When the loop reaches the last checkbox, set `inBetween` to `false`.
If `inBetween` is `true` set `checkbox.checked` to `true`.
```js
checkboxes.forEach(checkbox => {
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
if (inBetween) {
checkbox.checked = true;
}
});
```
By checking if the loop is hitting `this` _or_ `lastChecked`, the function works from both top to bottom and bottom to top.
By using `inBetween = !inBetween` you can swap it from true to false or false to true.