javascript - 检查 2 个框之间的一系列复选框

Question

我有一个行表，每行都有一个复选框。我构建了一个函数来检测是否按下了 Shift 键，如果按下了，那么一旦选中了 2 个复选框，它将选中它们之间的框。

该功能在某种程度上有效，但由于某种原因，我必须选中第三个框才能勾选之间的框。

如何更改代码，以便它在第二次检查时选中复选框，而不必检查第三次？

提前致谢。

下面是我的代码。

Vue 数据:

data: () => ({
  keycheck: false,
  checkRows: []
})

创建:

created() {
  window.addEventListener('keydown', e => {
    if (e.keyCode === 16) {
      this.keycheck = true
      console.log('The shift key is being held down...')
    }
  })

  window.addEventListener('keyup', e => {
    if (e.keyCode === 16) {
      console.log('Upper')
      this.keycheck = false
      this.checkRows = []
      //console.clear();
    }
  })
},
methods: {
  checkbox(key) {
    if (this.keycheck) {
      this.checkRows.push(key)

      if (this.checkRows.length === 2) {
        console.log(this.checkRows)

        for (let i = this.checkRows[0]; i <= this.checkRows[1]; i++) {
          let bData = this.displayed_array

          bData[i]['rowCheck'] = true
          console.log('test')
        }
      }
    }
  },
},

Answer 1

代码看起来没有什么问题。但是，现在如果您没有按住 Shift 键，则第一次点击不会注册在 checkRows 变量中。因此，您必须在第一次单击时按住 Shift 才能在两次单击后起作用。

if (this.keycheck) {
    this.checkRows.push(key);

我在这个代码笔中复制了它:https://codepen.io/CodingDeer/pen/pozbadW

仅供引用，最好使用 this.checkRows.length = 0; 将数组设置为空，因为它不会复制数组。