勾选checkbox时如何将对应div内的关联label字体设置为加粗

代码失效原因 #

1. 你使用了箭头函数作为事件回调，箭头函数没有独立的this指向，会继承外层作用域的this，无法指向当前触发事件的checkbox元素，因此this.checked、this.attr()都无法拿到正确结果。
2. 全局选择器$('.form-check label')会选中页面所有符合条件的label，不会匹配当前点击的checkbox对应的label，就算逻辑跑通也会误改其他label的样式。
3. 只实现了勾选时添加类的逻辑，没有处理取消勾选时移除加粗样式的逻辑。

最优解决方案（纯CSS实现，无需JS） #

直接用CSS的:checked伪类就能实现需求，性能更好逻辑更简单：

.form-check-input:checked + .form-check-label {
  font-weight: bold;
}

你可以直接删掉原来写的JS代码，添加上面这段CSS即可生效。

保留jQuery实现的修复方案 #

修改后的代码如下：

$('.form-check input').change(function() {
  // 选中当前checkbox同级的对应label
  const $targetLabel = $(this).siblings('.form-check-label');
  // 根据勾选状态自动切换加粗类
  $targetLabel.toggleClass('bold', this.checked);
})

修改点说明：

• 把箭头函数替换为普通函数，确保this指向触发事件的checkbox元素
• 用siblings()方法直接查找当前checkbox同层级的label，避免全局匹配其他元素
• 用toggleClass的第二个布尔参数，自动根据勾选状态添加/移除类，不需要额外写if判断

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