开启 JavaScript 技能的十月魔术之旅——完成第 10 天挑战！

2023-12-15 22:49:08

踏上挑战，解锁 JavaScript 技能的新篇章

在今天的 JavaScript 编码挑战中，我们将穿越时空，回到 2012 年，重温多选框的古老传说。尽管时代更迭，但多选框作为网页表单中的基本元素，始终扮演着不可或缺的角色。今天，我们将运用 JavaScript 的魔力，赋予多选框更加交互式和人性化的用户体验，让网页表单不再单调乏味。

握住 Shift 键，开启多选模式

当您按下键盘上的 Shift 键时，它就像一位无形的魔法师，开启了多选框的交互大门。通过握住 Shift 键，您可以像使用鼠标点击那样，逐个勾选或取消勾选多个相邻的多选框。这是多么令人惊叹的体验啊！

实现多选功能，缔造网页表单的魔法

要实现这一魔法，我们首先需要给多选框元素添加一个事件监听器，以便在用户按下 Shift 键时触发相关的 JavaScript 代码。在 JavaScript 代码中，我们可以通过检查用户是否按下了 Shift 键，来决定是否启用多选模式。一旦启用多选模式，我们就可以通过巧妙地运用 JavaScript 的逻辑控制，实现逐个勾选或取消勾选相邻多选框的操作。

示例代码，助您掌握多选技巧

<form>
  <input type="checkbox" id="checkbox1">
  <input type="checkbox" id="checkbox2">
  <input type="checkbox" id="checkbox3">
</form>

<script>
  // 获取所有多选框元素
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');

  // 添加事件监听器，在按下 Shift 键时触发相关代码
  document.addEventListener('keydown', (event) => {
    if (event.shiftKey) {
      // 启用多选模式
      checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('click', (event) => {
          // 如果当前多选框与第一个勾选的多选框之间没有其他勾选的多选框，则逐个勾选或取消勾选相邻的多选框
          if (!checkbox.checked && !isAnyCheckboxCheckedBetween(checkbox, firstCheckedCheckbox)) {
            checkbox.checked = true;
          } else if (checkbox.checked && isAnyCheckboxCheckedBetween(checkbox, firstCheckedCheckbox)) {
            checkbox.checked = false;
          }
        });
      });
    }
  });

  // 获取第一个勾选的多选框元素
  let firstCheckedCheckbox;

  // 检查当前多选框与第一个勾选的多选框之间是否有其他勾选的多选框
  function isAnyCheckboxCheckedBetween(checkbox, firstCheckedCheckbox) {
    // 循环遍历所有多选框元素
    for (const otherCheckbox of checkboxes) {
      // 如果当前多选框与第一个勾选的多选框之间存在其他勾选的多选框，则返回 true
      if (otherCheckbox !== checkbox && otherCheckbox !== firstCheckedCheckbox && otherCheckbox.checked) {
        return true;
      }
    }

    // 如果没有找到其他勾选的多选框，则返回 false
    return false;
  }
</script>