时间戳

首页 > 解决方案 > 检查两个框之间的一系列复选框

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

问题描述

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

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

如何更改代码以便它检查第二次检查的框而不必检查第三次？

提前致谢。

下面是我的代码。

维数据：

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')
        }
      }
    }
  },
},

标签： javascriptarraysvue.js

解决方案

代码似乎没有任何问题。但是，现在如果您不按住 shift，则第一次单击不会在checkRows变量中注册。因此，您必须在第一次单击时按住 shift 才能在两次单击中工作。

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

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

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

推荐阅读