jQuery 将 .each() 和 .on() 用于表中的复选框 [重复]

Posted 2023-03-05

【中文标题】jQuery 将 .each() 和 .on() 用于表中的复选框 [重复]

【英文标题】：jQuery Using .each() with .on() for Checkbox's in Table [duplicate]

【发布时间】：2021-01-24 10:06:29

【问题描述】：

我正在尝试这样做，因此单击表格行会选中一个复选框，并使用 localStorage 保存该值，以便在刷新页面时之前选中的复选框保持选中状态。

下面的代码完成了这两个任务。但是，它们一起导致先前选中的复选框（来自 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

【问题讨论】：

尝试prop 方法而不是attr，就像您在$("tr").each 中所做的那样

特别是这个答案：***.com/a/19630917/2181514 - 你必须使用.prop 用于 jquery 3.5.1 中的复选框

【参考方案1】：

$(this).attr('checked') 将始终返回一个字符串（参见 .attr) 文档）。因此，对其执行! 将始终导致false（除非它是一个空字符串，但在您的代码中不会发生）。

简化为

this.checked = !this.checked;