JavaScript- 按住 Shift 可以選取多個複選框！

在接受 Wes Bos 的 JavaScript30 的另一個艱難挑戰後，我又回來了！今天的挑戰比我原想的要多得多。 按住 Shift 來選取多個方塊是一種常見的做法，我很驚訝地發現它沒有自動內建到網站中，而且您必須自己手動編碼。 顯然，如果是這樣的話，那麼這堂課就不會存在，但你知道我的意思。

在完全透明的情況下，我放棄了並跟隨韋斯學習這節課。 影片開始時，他甚至鼓勵我們掌控一切並自己解決問題。 經過一個半小時​​的谷歌搜尋並嘗試任何真正的進步後，我放棄了並繼續學習本課程。 我並不為放棄這個而感到自豪，但我確實陷入了不相關信息的兔子洞，我懷疑我本周是否會想出一個實際的解決方案！ 所以是的...我低著頭跟著韋斯。

本課非常不言自明。 您將獲得一個基本清單，然後被要求透過在選取一個方塊時按住 Shift 鍵來選取多個方塊。 涼爽的。 事實證明這比我想像的要複雜得多。 在我們深入實際的課程以及我們需要做的事情之前，我確實想指出一件事。

    input:checked + p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

這行非常簡單的 CSS 對我來說很酷。 我知道可以用 HTML 製作一個複選框 但我不知道您可以通過選中該框來使用 CSS 更改複選框/複選框所在的 div 的屬性。 我還想在這裡指出，韋斯也提到了他說「檢查」這個詞的頻率，因為影片中出現了很多次…公平警告，這篇文章中也會出現同樣的情況。

  let log = document.querySelector('#log');
  document.addEventListener("click", logKey)
  function logKey(e) {
    console.log(`The shift key is pressed: ${e.shiftKey}`);}

function validate() {
  if (document.getElementsByClassName('item').checked) {
    alert('checked');
  } else { alert('you didnt check it!')} }
validate()  
  let checkBoxes = document.querySelectorAll('checkbox');
  let selected = [];
  for (let i=0; i < checkBoxes.length; i++) {
    if (checkBoxesp[i].checked) {
      selected.push(checkBoxes[i].value)} }

這一行上面的程式碼區塊中的所有內容都失敗了。 這些只是我嘗試自己找出解決方案的一些嘗試。 有幾次我確實感覺自己走在正確的軌道上。 例如，函數 logKey(e) 的第一部分我非常自豪地找到瞭如何在單擊期間按下 Shift 鍵和未按下時進行呼叫。 之後...我什至無法猜測如何繼續。 我再次陷入困境。

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
let lastChecked

function handleCheck(e) {
  let inBetween = false
if (e.shiftKey && this.checked){
  checkboxes.forEach (checkbox => {
    console.log(checkbox)
    if (checkbox === this || checkbox === lastChecked) {
      inBetween =!inBetween;
    }
    if(inBetween) {
      checkbox.checked = true
    }
  })
}
  lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

韋斯來這裡是為了拯救世界。 他確實聲明可以透過在 HTML 中呼叫父/子來選取多個框，但這很容易被 HTML 的變更所破壞。 相反，他讓我們使用 for 循環，或至少是 forEach。 這對我來說確實很有意義。 這是一種相當簡單的方法，可以瀏覽 HTML 的每個部分，同時檢查是否選取了某個方塊。 但這只是成功的一半。
使用 forEach 之後，我們必須建立一個新變數來確定哪個元素位於檢查的第一個元素和檢查的最後一個元素之間。 這就是我們檢查剩餘框並更改其屬性以反映最初檢查的元素的方式。 這裡有太多的行讓我有點迷失......再次使用||並使用 !變量之前對我來說是奇怪的概念。 在我的下一個項目之前，我必須更多地研究它們。
在我知道發生了什麼事之前，我們已經完成了挑戰。 它剛剛起作用了。 就在那一刻，我發現這個挑戰比我想像的要簡單得多。 歸根結底，程式碼並不多。 能夠一起使用所有零件是複雜的部分。 我本來可以自己解決這個問題，但即使這樣說，我也懷疑我能否在本週末之前找到一個可行的解決方案。
好了，這篇文章就到此結束了！ 今天的課程對我來說不是最好的，但它很好地提醒我，我還有很長的路要走。 我希望您回來查看我的下一篇文章，其中包含 Wes Bos 的 JavaScript 30 的下一部分 - 11 自訂 HTML5 視訊播放器！

以上是JavaScript- 按住 Shift 可以選取多個複選框！的詳細內容。更多資訊請關注PHP中文網其他相關文章！