如何实现点击表格数据行时切换对应checkbox的选中状态？

嘿，我懂你的困扰！问题的核心在于动态生成的DOM元素——你最初用$(document).ready()绑定的tr点击事件，只会对页面加载时已经存在的行（也就是表头那一行）生效，而后续通过JavaScript动态添加的数据行，根本没被绑定到这个事件上，所以点击时毫无反应。

解决方案：使用事件委托 #

我们可以利用jQuery的事件委托机制，把点击事件绑定到**父容器（表格本身）**上，让它监听所有子元素tr的点击——不管这些tr是页面加载时就有的，还是后来动态生成的，都能被捕获到。

修改后的代码如下：

$(document).ready(function() {
    // 绑定事件到表格，监听动态生成的tr点击
    $('#menu').on('click', 'tr', function(event) {
        // 跳过表头行（避免点击表头触发切换）
        if ($(this).has('th').length) return;
        
        // 排除点击checkbox本身的情况，避免重复触发状态切换
        if (event.target.type !== 'checkbox') {
            // 直接切换checkbox的选中状态，比trigger('click')更可靠
            const checkbox = $(this).find(':checkbox');
            checkbox.prop('checked', !checkbox.prop('checked'));
        }
    });
});

关键细节说明： #

• 事件委托的优势：通过将事件绑定到父元素（#menu表格），利用事件冒泡机制，父元素能捕获到所有子元素的点击事件，包括后续动态添加的行。
• 跳过表头行：添加if ($(this).has('th').length) return;可以避免点击表头时触发checkbox切换，更符合用户的交互预期。
• 直接修改状态而非触发点击：用prop('checked', !checkbox.prop('checked'))直接切换checkbox的选中状态，比trigger('click')更稳定，能避免可能的事件冒泡冲突。

这样修改后，你点击任何一行数据行（除了表头），对应的checkbox都会在选中/未选中状态之间切换啦！

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