jQuery中多复选框选中时如何仅修改对应Div内标题样式？

你的核心问题在于全局匹配了所有符合条件的Checkbox和元素，导致任何一个Checkbox的状态变化都会影响所有Div里的.heading。咱们来拆解问题并给出可行方案：

原代码的问题分析 #

1. 你用$('div').find('.check1, .check2').is(":checked")判断选中状态时，会遍历页面中所有Div里的Checkbox——只要有一个被选中，这个条件就会成立，自然会触发所有相关元素的样式修改。
2. this的上下文可能没有正确指向当前被点击的Checkbox（比如事件绑定方式不对），导致.siblings('.heading')无法精准定位到当前Div内的目标元素。

解决方案1：精准定位当前Div内的元素（直接修改样式） #

我们需要把操作范围限定在当前被点击Checkbox所在的Div内，同时确保this指向触发事件的Checkbox：

// 给所有目标Checkbox绑定change事件
$('.check1, .check2').on('change', function() {
  // 找到当前Checkbox所属的父级Div
  const currentDiv = $(this).closest('div');
  // 定位到该Div内的.heading元素
  const targetHeading = currentDiv.find('.heading');

  if ($(this).is(':checked')) {
    targetHeading.css('color', 'pink');
  } else {
    targetHeading.removeAttr('style');
  }
});

关键改动说明： #

• 用on('change')绑定事件，确保this严格指向当前被操作的Checkbox。
• closest('div')精准获取当前Checkbox最近的父级Div，彻底限定了操作范围，不会影响其他Div内的元素。
• 放弃全局匹配，只针对当前Div内的.heading做样式修改。

解决方案2：用CSS类替代直接修改样式（更推荐） #

把样式逻辑分离到CSS中，不仅更容易维护，也符合前端开发的最佳实践：

首先定义CSS类：

.pink-heading {
  color: pink;
}

然后修改JS代码：

$('.check1, .check2').on('change', function() {
  // 切换目标heading的类，根据当前Checkbox的选中状态
  $(this).closest('div')
         .find('.heading')
         .toggleClass('pink-heading', $(this).is(':checked'));
});

toggleClass的第二个参数可以直接传入布尔值，自动根据Checkbox的选中状态添加/移除类，代码更简洁。

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