JS导致HTML Input Checkbox失效：点击无效果原因及功能需求

问题描述 #

点击HTML中的Input Checkbox没有任何效果，推测是JavaScript代码导致失效。需求是实现点击表格行（<tr>）或者点击Input Checkbox本身，都能切换该Checkbox的选中状态。原代码如下：

原JavaScript代码 #

var trs = document.getElementsByTagName('tr')
var control = true

for (var i = 0; i < trs.length; i++) {

  trs[i].onclick = function() {
    if (this.getElementsByTagName('input')[0].checked == true) {
      this.getElementsByTagName('input')[0].checked = false
    } else if (this.getElementsByTagName('input')[0].checked == false) {
      this.getElementsByTagName('input')[0].checked = true
    }
  }

  trs[i].onmouseenter = function() {
    this.style.backgroundColor = 'grey'
  }

  trs[i].onmouseleave = function() {
    this.style.backgroundColor = ''
  }
}

原CSS代码 #

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 60%;
}

td {
  border: 1px solid black;
  text-align: center;
}

原HTML代码 #

<table>
  <thead>
    <tr>
      <td><input type="Checkbox">全选</td>
      <td>商品</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="Checkbox"></td>
      <td>手机</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>电脑</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>手表</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>耳机</td>
    </tr>
  </tbody>
  <input type="Checkbox">

</table>

原因分析 #

核心问题是事件冒泡：当点击Checkbox时，点击事件会从Checkbox元素向上冒泡到其父元素<tr>，触发<tr>的onclick事件。此时Checkbox本身已经完成了一次状态切换，但<tr>的事件又会再次切换它的状态，相当于两次切换抵消，最终看起来Checkbox没有变化。

修复方案 #

有两种可行的修复方式，选其一即可：

方式一：阻止Checkbox的事件冒泡 #

给每个Checkbox添加点击事件，阻止事件向上冒泡到<tr>，这样<tr>的onclick事件就不会在点击Checkbox时触发。同时简化<tr>的点击逻辑：

var trs = document.getElementsByTagName('tr')

for (var i = 0; i < trs.length; i++) {
  // 提前缓存当前行的Checkbox，减少DOM查询次数
  const checkbox = trs[i].getElementsByTagName('input')[0]
  
  trs[i].onclick = function() {
    // 直接取反选中状态，简化代码逻辑
    this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked
  }

  // 给Checkbox添加点击事件，阻止事件冒泡
  checkbox.onclick = function(e) {
    e.stopPropagation()
  }

  trs[i].onmouseenter = function() {
    this.style.backgroundColor = 'grey'
  }

  trs[i].onmouseleave = function() {
    this.style.backgroundColor = ''
  }
}

方式二：在<tr>的点击事件中判断触发源 #

如果事件的触发源是Checkbox，则不执行状态切换逻辑，避免重复操作：

var trs = document.getElementsByTagName('tr')

for (var i = 0; i < trs.length; i++) {
  trs[i].onclick = function(e) {
    // 仅当触发元素不是Checkbox时，才执行状态切换
    if (e.target.tagName !== 'INPUT') {
      this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked
    }
  }

  trs[i].onmouseenter = function() {
    this.style.backgroundColor = 'grey'
  }

  trs[i].onmouseleave = function() {
    this.style.backgroundColor = ''
  }
}

额外优化说明 #

• 原代码中的control变量未被使用，可直接删除。
• 重复调用getElementsByTagName('input')[0]会多次查询DOM，建议提前缓存到变量中，提升代码性能。

内容的提问来源于stack exchange，提问作者芬光腾明