JQuery实现复选框全选/反选仅生效一次的问题排查

你的代码问题出在使用attr()操作复选框的选中状态：jQuery中attr()针对的是HTML元素的初始属性（attribute），而复选框的实际选中状态由DOM的实时属性（property）checked控制。前两次操作后，HTML属性和DOM属性出现不一致，后续用attr()获取的不再是当前真实的选中状态，导致逻辑失效。

修复代码 #

将代码中的attr()替换为prop()即可解决问题：

function selectAll(idOfButton) {
    var className = '.rowCounter' + idOfButton  
    $(className).each(function () {
        // 用prop操作DOM属性，获取/设置真实的选中状态
        $(this).prop('checked', !$(this).prop('checked'));
    });
}

优化写法（可选） #

如果想要更高效的全选/反选逻辑，可以先判断当前是否所有复选框都已选中，再统一设置状态，避免逐个遍历切换：

function selectAll(idOfButton) {
    var className = '.rowCounter' + idOfButton;
    var checkboxes = $(className);
    // 检查是否所有目标复选框都已选中
    var isAllChecked = checkboxes.filter(':checked').length === checkboxes.length;
    // 统一设置为相反状态
    checkboxes.prop('checked', !isAllChecked);
}

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