使用jQuery .each()与.on()处理表格复选框的状态切换异常问题

最近碰到个闹心的小问题：我想实现两个功能——点击表格行就能切换对应复选框的勾选状态，同时用localStorage保存勾选状态，页面刷新后还能保留之前的选择。单独写这两个功能时都正常，但放一起就出bug了：从localStorage恢复勾选的复选框，没法通过点击行来切换状态，必须直接点复选框才行。

先贴一下我之前的代码：

<script> 
$("tr").each(function(e){ 
    $("input[type='checkbox']", this).each( function() { 
        if (localStorage.getItem(this.value) == 'true') { 
            $(this).prop("checked", true)
        }; 
    }); 
}); 
$("tr").on("click", function(e){ 
    $("input[type='checkbox']", this).each( function() { 
        $(this).attr('checked', !$(this).attr('checked')); 
        localStorage.setItem(this.value, this.checked); 
    }); 
}); 
</script>

使用版本：bootstrap-4.5.2，jquery-3.5.1.slim

问题根源：attr()和prop()的混用！ #

在jQuery里，操作复选框的checked状态时，prop()是用来操作DOM元素的当前状态（比如用户实际勾选的状态），而attr()操作的是HTML标签上的初始属性值。

当我用prop("checked", true)从localStorage恢复状态时，复选框的DOM状态确实是勾选了，但HTML标签上的checked属性并没有同步更新。之后点击行切换状态时，用attr('checked', !$(this).attr('checked'))去反转，这时候attr('checked')拿到的是最初的HTML属性值（可能是undefined），导致切换逻辑完全出错，自然没法通过点击行改变状态。

修复方案：统一用prop()操作状态 #

把所有涉及checked状态的操作都换成prop()，不要混用attr()和prop()。修改后的代码如下：

<script> 
// 从localStorage恢复勾选状态
$("tr").each(function(){ 
    $("input[type='checkbox']", this).each(function() { 
        if (localStorage.getItem(this.value) === 'true') { 
            $(this).prop("checked", true); 
        } 
    }); 
}); 

// 点击行切换复选框状态并保存到localStorage
$("tr").on("click", function(e){ 
    // 优化：点击复选框本身时不重复触发行事件
    if (!$(e.target).is("input[type='checkbox']")) {
        $("input[type='checkbox']", this).each(function() { 
            $(this).prop("checked", !$(this).prop("checked")); 
            localStorage.setItem(this.value, $(this).prop("checked")); 
        }); 
    }
}); 
</script>

关键修改点说明： #

1. 切换状态时，把attr('checked', ...)改成prop("checked", ...)，确保操作的是DOM元素的真实勾选状态；
2. 保存到localStorage时，用$(this).prop("checked")获取当前状态，保持逻辑统一；
3. 加了个小优化：点击复选框本身时，不再触发行的点击事件，避免状态被重复反转（毕竟复选框自己点击也会切换状态）。

现在再测试一下：刷新页面后，从localStorage恢复的复选框，点击行就能正常切换状态了，新的勾选状态也会正确保存到localStorage里～

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