为什么jQuery find方法无法找到表格td标签内的input元素？

你的find方法本身语法、逻辑没有错误，表现异常的核心原因是点击事件冒泡冲突：

• 当你直接点击checkbox控件时，首先会触发input自带的点击行为，自动切换checked状态
• 点击事件随即冒泡到父级<td>元素，触发你绑定的td点击事件，再次切换checked状态，相当于两次操作抵消，看起来就像是设置没生效，容易误以为是find没有匹配到元素
• 另外你当前给所有td都绑定了点击事件，前4列存储产品信息的td内本身就没有input元素，find返回空jQuery对象，操作不会生效，属于无效绑定。

可以在find代码后加日志输出确认：

var checkBox = $(this).find("input");
console.log('匹配到的元素数量：', checkBox.length);

如果输出为1说明元素匹配成功，就是冒泡冲突导致的问题；如果输出为0再排查DOM结构、元素是否为动态生成等问题。

方案1：限定绑定范围+阻止冒泡 #

// 只给存在checkbox的最后一列td绑定点击事件
$("#table-products tbody tr td:last-child").on('click', function () {
    const checkBox = $(this).find("input");
    checkBox.prop("checked", !checkBox.is(':checked'));
});
// 阻止checkbox本身的点击事件冒泡到父级td，避免重复切换
$(".product-checkbox").on('click', function(e) {
    e.stopPropagation();
});

方案2：判断点击来源再执行操作 #

$("#table-products tbody tr td").on('click', function (e) {
    // 仅点击td本身、而非内部子元素时才执行逻辑
    if (e.target === this) {
        const checkBox = $(this).find("input");
        // 先判断是否匹配到checkbox，再执行属性操作
        if (checkBox.length) {
            checkBox.prop("checked", !checkBox.is(':checked'));
        }
    }
});

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