jQuery实现复选框全选功能出现异常行为的问题咨询

代码的核心问题是混淆了jQuery中attr()和prop()的作用：

• attr()操作的是HTML标签的静态初始属性，只会在页面首次渲染时决定元素的默认状态
• 用户手动勾选/取消复选框时，修改的是DOM元素的动态运行时属性（property），这个状态不会同步回HTML的静态属性
• 后续用attr()修改checked值时，只会修改静态属性，不会更新已经被用户操作过的动态选中状态，因此会出现手动操作后的复选框不响应的问题。

把SelectUnselect方法中设置复选框状态的attr()替换为prop()即可，同时可以省去没必要的each遍历，jQuery选择器支持直接批量操作匹配元素，修正后的代码如下：

function SelectUnselect(){
    const boolCheckUncheck = $('.selectAll').prop('checked');
    $('.checkbox1:checkbox:visible').prop('checked', boolCheckUncheck);
}

修改说明：

• 直接用prop()获取和设置checked状态，保证操作的是DOM的实时运行属性
• 去掉冗余的each循环，简化代码逻辑
• 简化了变量赋值逻辑，不需要额外的if判断

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