JQuery复选框批量选中功能在手动修改后失效的问题求助

问题场景：全选按钮在未手动点击修改复选框状态前可正常工作，但手动修改过复选框状态后，点击按钮就无法控制复选框的选中状态了。需求是无论是否手动修改过复选框状态，按钮都能正常切换全选/全不选。

原代码 #

$(function() {
        $("#click").click(function() {
           var control = $("#checkboxId").is(":checked");
           if (control == false) {
               $(":checkbox").attr("checked", true);
           } else {
               $(":checkbox").attr("checked", false);
           }
       });
    });

问题原因 #

问题出在使用attr()方法操作复选框的checked属性。attr()仅操作DOM元素的初始属性值，当用户手动点击复选框后，复选框的实际选中状态由DOM的动态checked属性控制，此时用attr()修改已经无法同步到实际的选中状态。

解决方案 #

改用prop()方法操作复选框的选中状态，prop()专门用于处理元素的动态状态属性（比如表单控件的选中、禁用状态），能正确同步DOM的实时状态。

修改后的代码 #

$(function() {
    $("#click").click(function() {
        var control = $("#checkboxId").is(":checked");
        if (!control) {
            $(":checkbox").prop("checked", true);
        } else {
            $(":checkbox").prop("checked", false);
        }
    });
});

简化版代码 #

可以进一步简化逻辑，直接取反目标状态：

$(function() {
    $("#click").click(function() {
        var targetState = !$("#checkboxId").is(":checked");
        $(":checkbox").prop("checked", targetState);
    });
});

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