如何用jQuery结合父选择器实现复选框控制div背景色切换？

首先定义一个用于高亮背景的CSS类，让样式切换更灵活：

.highlight-bg {
  background-color: #e8f4f8; /* 可替换为任意你需要的背景色 */
  padding: 10px; /* 可选，优化视觉效果 */
}

接下来用jQuery实现核心逻辑，监听复选框状态变化，切换父级div的样式：

$(document).ready(function() {
  // 监听复选框的change事件
  $('#personal-info-checkbox').on('change', function() {
    // 找到当前复选框所在的父级checkbox-container
    const $targetDiv = $(this).closest('.checkbox-container');
    // 自动切换高亮类：勾选时添加，取消时移除
    $targetDiv.toggleClass('highlight-bg');
  });
});

关键代码说明 #

• $(this).closest('.checkbox-container')：从当前复选框向上查找最近的带.checkbox-container类的父元素，比parent()更稳定，就算后续HTML嵌套层级调整也能精准定位目标div。
• toggleClass('highlight-bg')：jQuery内置的切换方法，自动判断元素是否已拥有该类——存在则移除，不存在则添加，完美适配复选框勾选/取消的场景。

如果需要手动判断状态（比如要附加其他逻辑），也可以这么写：

$(document).ready(function() {
  $('#personal-info-checkbox').on('change', function() {
    const $targetDiv = $(this).closest('.checkbox-container');
    if ($(this).is(':checked')) {
      $targetDiv.addClass('highlight-bg');
      // 可添加勾选后的额外操作
    } else {
      $targetDiv.removeClass('highlight-bg');
      // 可添加取消勾选后的额外操作
    }
  });
});

完整可运行的代码示例：

<div class="checkbox-container">
  <input type="checkbox" class="checkbox-border" id="personal-info-checkbox">
  <label for="personal-info-checkbox"> Mark as reviewed and acknowledged</label>
</div>

<style>
.checkbox-container {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #eee;
}
.highlight-bg {
  background-color: #e8f4f8;
}
</style>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#personal-info-checkbox').on('change', function() {
    $(this).closest('.checkbox-container').toggleClass('highlight-bg');
  });
});
</script>

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