实现复选框勾选时修改含H4标签的Div背景与标题文本颜色

首先我们先定义好激活状态的CSS样式，把样式和逻辑分离，后续调整起来更方便：

/* 激活状态下的头部背景色 */
.active-header {
  background-color: #dc3545; /* 这里用Bootstrap危险色做示例，你可以自定义颜色 */
}

/* 激活状态下的标题文字颜色 */
.active-header h4.box-title a {
  color: #ffffff; /* 白色文字，可根据背景色调整 */
}

接下来是实现需求的jQuery代码：

// 监听Gender区域内所有复选框的状态变化
$("#Gender input[type='checkbox']").change(function() {
  // 统计当前区域内被勾选的复选框总数
  const hasCheckedBoxes = $("#Gender input[type='checkbox']:checked").length > 0;
  // 精准定位到包含H4的.box-header容器
  const targetHeader = $(this).closest(".panel.box").find(".box-header");
  
  if (hasCheckedBoxes) {
    // 只要有一个复选框被勾选，就添加激活样式
    targetHeader.addClass("active-header");
  } else {
    // 所有复选框都取消勾选时，移除激活样式
    targetHeader.removeClass("active-header");
  }
});

代码细节说明： #

• 正确定位目标元素：用closest(".panel.box")向上遍历DOM树找到最外层的面板容器，再通过find(".box-header")定位到你要修改的头部div，这种方式比硬写层级选择器更灵活，就算后续DOM结构微调也不容易出错。
• 全局判断复选框状态：每次状态变化时，统计整个区域内被勾选的复选框数量，而不是只看当前操作的那一个——这样就能处理「取消一个勾选但还有其他复选框处于勾选状态」的场景，不会错误移除样式。
• 类名控制样式：通过添加/移除预定义的CSS类来切换样式，比直接用.css()修改内联样式更易于维护，后续调整颜色只需要修改CSS即可。

你现有代码的问题： #

• 目标元素定位错误：$(this).parent()指向的是复选框所在的<li>标签，而不是你想要修改的.box-header，所以样式加错了位置。
• 状态判断不全面：只判断当前操作的复选框是否勾选，没有考虑同区域其他复选框的状态，导致出现「取消一个勾选就移除样式，但还有其他复选框是勾选的」错误情况。

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