如何实现取消所有复选框并同步切换div背景色？代码问题求助

你的问题出在取消按钮仅修改了复选框的选中状态，但没有触发复选框的change事件，导致绑定在change事件上的背景色恢复逻辑没有执行。

核心原因 #

当你通过jQuery的prop("checked", false)手动修改复选框状态时，浏览器不会自动触发change事件——只有用户手动点击复选框时才会触发这个事件。而你的背景色切换逻辑完全依赖于change事件，所以取消按钮点击后，背景色不会自动恢复。

解决方案一：手动触发change事件 #

修改你的uncheckAll函数，在设置复选框状态后手动触发change事件，让背景色切换逻辑自动执行：

function uncheckAll() { 
  $("input[type='checkbox']:checked")
    .prop("checked", false)
    .trigger('change'); // 触发change事件，触发背景色移除逻辑
}

解决方案二：直接移除背景色类（更高效） #

如果你不想依赖change事件，也可以直接找到每个选中的复选框对应的父元素（label），手动移除changeBackground类：

function uncheckAll() { 
  $("input[type='checkbox']:checked")
    .prop("checked", false)
    .parent() // 获取复选框的父元素label
    .removeClass("changeBackground"); 
}

额外的代码优化建议 #

你的change事件处理函数里还有两个小问题：

1. $(this).is(":checked", true)的写法是错误的，is()方法不需要第二个参数，直接写$(this).is(":checked")或者更高效的原生属性this.checked即可。
2. $('#aufheben_button').parent().removeClass("changeBackground");这行代码完全多余，按钮的父元素是body，和你的目标div没有关系，应该删掉。

优化后的change事件代码：

$("input[type='checkbox']").change(function(){
  if(this.checked){ // 原生属性更简洁高效
    $(this).parent().addClass("changeBackground");
  }else{
    $(this).parent().removeClass("changeBackground");
  }
});

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