#Javascript30 #10 - Hold shift and multiple checkboxes

luis-monge-acc · luis-monge-acc · commit bf0652df79b6 · 2017-09-25T21:59:25.000-06:00
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -99,6 +99,27 @@
   </div>
 
 <script>
+const checkboxes = document.querySelectorAll('.input input[type=checkbox]');
+let lastChecked;
+
+function handleCheck (e) {
+  let inBetween = false;
+  if (e.shiftKey && this.checked) {
+    checkboxes.forEach(checkbox => {
+      if (checkbox === this || checkbox === lastChecked) {
+        inBetween = !inBetween;
+      }
+
+      if (inBetween) {
+        checkbox.checked = true;
+      }
+    });
+  }
+
+  lastChecked = this;
+}
+
+checkboxes.forEach(checkbox => addEventListener('click', handleCheck));
 </script>
 </body>
 </html>
