使用 jQuery 切换复选框只能工作两次答案

【问题标题】：Toggle checkboxes with jQuery works only twice使用 jQuery 切换复选框只能工作两次
【发布时间】：2015-08-10 17:17:46
【问题描述】：

我有这个旧代码，用于选择类 .sselect 的所有复选框，然后使用同一按钮再次取消选择所有复选框 #selectall

代码工作了两次，选中所有复选框，然后再次取消选中它们，但不再选择。有什么建议吗？

$(function() {  
    var tog = true;
    $('a#selectall').click(function() {
        if (tog) {
            $('input.sselect').attr("checked","checked");
            $(this).html('<i class="fa fa-check-circle"></i> Unselect all');
        }
        else {
            $('input.sselect').removeAttr('checked'); 
            $(this).html('<i class="fa fa-check"></i> Select all');
        }
        tog = !tog;
    });
});

更新使用prop() 解决了这个问题，但没有解释为什么attr() 工作一次而不是两次。我阅读了 jQuery 文档：

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法。

但为什么上面的代码实际上无法设置属性？第一次可以，为什么下次就不行了？

这个答案揭示了这个话题：Setting "checked" for a checkbox with jQuery? - 但我看到的问题不是表单被重置，而是属性在被removeAttr() 删除后无法读取。

【问题讨论】：

使用$('input.sselect').prop("checked",true/false);

标签： jquery html checkbox

【解决方案1】：

checked属性一旦被删除，就不能再添加了。

您应该使用prop 而不是attr：

$('input.sselect').prop("checked", true); // Check


$('input.sselect').prop("checked", false); // Unheck

【讨论】：

当然。但是，如果您解释为什么我的代码不起作用，我会将其标记为建议的答案。
为什么不能再次添加？这是在哪里记录的？我只是出于好奇而寻找解释。既然.attr('checked','checked')可以添加一次属性，为什么删除后不能再添加一次呢？最初也不存在。