点击表格行切换Checkbox选中状态的问题及解决方法咨询

问题说明 #

当前实现点击表格行时只能选中Checkbox，无法取消选中，原因是代码中始终将checked属性设为true；同时需要排除点击最后一个包含操作按钮的<td>时触发该行为。

修改后的代码 #

HTML代码 #

<table id="chkContainer">
  <tr id="row-1">
    <td><input type="checkbox" value="1"></td>
    <td>1st Row</td>
    <td>Not clickable</td>
  </tr>
  <tr id="row-2">
    <td><input type="checkbox" value="2"></td>
    <td>2nd Row</td>
    <td>Not clickable</td>
  </tr>
  <tr id="row-3">
    <td><input type="checkbox" value="3"></td>
    <td>3rd Row</td>
    <td>Not clickable</td>
  </tr>
</table>

jQuery代码 #

$(function() {
  // 绑定行内非最后一个td的点击事件
  $("#chkContainer tr > td:not(:last-child)").on("click", function(e) {
    // 点击checkbox本身时，避免重复触发状态切换
    if ($(e.target).is("input:checkbox")) return;
    
    const tr = $(this).closest('tr');
    const chk = tr.find('input:checkbox');
    // 切换checked状态：取反当前值
    const newCheckedState = !chk.prop("checked");
    chk.prop("checked", newCheckedState);
    
    // 根据选中状态切换行样式
    tr.toggleClass('red', newCheckedState);
  });
  
  // 点击checkbox时同步行样式，确保直接点击checkbox也能触发样式变化
  $("#chkContainer input:checkbox").on("change", function() {
    $(this).closest('tr').toggleClass('red', this.checked);
  });
})

关键改动说明 #

• 排除最后一个单元格：使用td:not(:last-child)选择器，直接过滤掉最后一个<td>，避免点击它时触发事件。
• 实现状态切换：不再固定设置checked为true，而是通过!chk.prop("checked")取反当前选中状态，实现点击行时的选中/取消切换。
• 避免重复触发：判断点击目标如果是Checkbox本身，直接返回，防止点击Checkbox时因事件冒泡导致状态反复切换。
• 同步样式变更：绑定Checkbox的change事件，确保直接点击Checkbox时也能同步行的样式状态。

内容的提问来源于stack exchange，提问作者ReynierPM