day 10

etrex · etrex · commit 481c3d3af92b · 2020-06-14T22:00:53.000+08:00
diff --git a/team/Etrex/Day10 - multi check/index.html b/team/Etrex/Day10 - multi check/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+
+</body>
+<script>
+  // 生成一堆 checkbox
+  const a =  []
+  a.length = 1000;
+  a.fill('<input type="checkbox">')
+  document.querySelector('body').innerHTML = a.join('\n')
+  const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')];
+
+
+  let lastCheckIndex;
+  checkboxes.forEach(checkbox => checkbox.addEventListener('click', function(event){
+    if(event.shiftKey){
+      // 清空 lastCheckIndex 上下有選到的 checkbox
+      for(let i = lastCheckIndex - 1 ; i >= 0 ; i--){
+        if(checkboxes[i].checked){
+          checkboxes[i].checked = false
+        }else{
+          break;
+        }
+      }
+      for(let i = lastCheckIndex + 1 ; i < checkboxes.length ; i++){
+        if(checkboxes[i].checked){
+          checkboxes[i].checked = false
+        }else{
+          break;
+        }
+      }
+      // 選取從 lastCheckIndex 到目前點擊的 checkbox
+      const currentCheckIndex = checkboxes.indexOf(event.target)
+      const index1 = Math.min(lastCheckIndex, currentCheckIndex)
+      const index2 = Math.max(lastCheckIndex, currentCheckIndex)
+      for(let i = index1 ; i <= index2 ; i++){
+        checkboxes[i].checked = true
+      }
+    }else{
+      lastCheckIndex = checkboxes.indexOf(event.target)
+    }
+  }))
+</script>
+</html>
