Merge pull request #45 from lizwang50/etrex-day10

etrex · web-flow · commit e549dbe79204 · 2020-06-14T22:08:32.000+08:00
Etrex day10
diff --git a/index.html b/index.html
@@ -165,7 +165,7 @@ <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
                       <li>Day#09｜<span>Dev Tools Domination</span>
                       </li>
                     </a>
-                    <a class="project-item" href="#">
+                    <a class="project-item" href="team/Etrex/Day10 - multi check/index.html">
                       <li>Day#10｜<span>Hold Shift and Check Checkboxes</span>
                       </li>
                     </a>
diff --git a/team/Etrex/Day10 - multi check/index.html b/team/Etrex/Day10 - multi check/index.html
@@ -0,0 +1,49 @@
+<!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>
