{"id":22345792,"url":"https://github.com/gerhynes/checkboxes","last_synced_at":"2025-03-26T10:22:43.991Z","repository":{"id":106044562,"uuid":"106111032","full_name":"gerhynes/checkboxes","owner":"gerhynes","description":"A page for working on checkbox selection. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-14T19:32:58.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T11:49:42.744Z","etag":null,"topics":["checkbox-selection","javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/checkboxes/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-07T16:03:33.000Z","updated_at":"2018-01-23T21:48:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"96781a41-d1c0-493a-884b-7e66cb4835bb","html_url":"https://github.com/gerhynes/checkboxes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcheckboxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcheckboxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcheckboxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcheckboxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/checkboxes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632899,"owners_count":20647303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox-selection","javascript","javascript30"],"created_at":"2024-12-04T09:18:43.322Z","updated_at":"2025-03-26T10:22:43.965Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","readme":"# [Hold Shift to Check Multiple Checkboxes](https://gk-hynes.github.io/checkboxes/)\n\nA page for working on checkbox selection. Built for Wes Bos'\n[JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of checkbox page](https://res.cloudinary.com/gerhynes/image/upload/v1515706202/Checkboxes_rlgwud.png)](https://gk-hynes.github.io/checkboxes/)\n\n## Notes\n\nSelect all the checkboxes, loop over them and listen for a click.\n\nWhen a box is checked run the `handleCheck` function.\n\nCreate 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.\n\nCheck if the shift key is down and a box is being checked.\n\n```js\n if (e.shiftKey \u0026\u0026 this.checked) { run code }\n```\n\nLoop 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.\n\nDon't try to figure out where in the DOM the checkboxes are, and which elements are inbetween. This is quite fragile.\n\nInstead, 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`.\n\nIf `inBetween` is `true` set `checkbox.checked` to `true`.\n\n```js\ncheckboxes.forEach(checkbox =\u003e {\n  if (checkbox === this || checkbox === lastChecked) {\n    inBetween = !inBetween;\n  }\n  if (inBetween) {\n    checkbox.checked = true;\n  }\n});\n```\n\nBy checking if the loop is hitting `this` _or_ `lastChecked`, the function works from both top to bottom and bottom to top.\n\nBy using `inBetween = !inBetween` you can swap it from true to false or false to true.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fcheckboxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fcheckboxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fcheckboxes/lists"}