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中文网其他相关文章！