如何实现复选框选中时字体加粗、取消选中时恢复正常的交互效果？

哈哈，这个“stumped”的双关我必须给你点个赞！看来你在给复选框做自定义样式的时候遇到了小麻烦，我来帮你搞定它～

先说说你当前代码的问题： #

• 你用了全局变量action来控制样式切换，这会导致多个复选框互相干扰——比如点第一个复选框后，第二个复选框的状态逻辑也会跟着变，完全乱套。
• fontWeight函数里直接选中所有.control--checkbox元素，意味着点任何一个复选框，所有复选框的字体都会一起变粗/恢复，这显然不是你想要的效果。
• 没有利用复选框原生的checked状态，反而用自定义变量来追踪状态，既冗余又容易出错。

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

其实根本不用写JS，CSS原生的:checked伪类就能完美实现这个需求，而且更简洁可靠：

/* 当复选框被选中时，紧邻它的label字体加粗 */
.control--checkbox input:checked + label {
  font-weight: bold;
}

只要你的HTML结构是input和label相邻（或者用for属性绑定），这个CSS就能自动生效：点击复选框或者对应的label，字体都会立刻加粗；取消选中时自动恢复常规粗细，而且每个复选框完全独立，不会互相影响。

如果你一定要用JS实现（比如有更复杂的逻辑） #

那也应该基于复选框的checked状态来处理，并且只修改当前复选框对应的label：

$(function() {
  // 监听复选框的change事件（比click更可靠，支持键盘切换状态）
  $('.control--checkbox input').on("change", function() {
    // 获取当前复选框对应的label元素
    const targetLabel = $(this).siblings('label');
    // 根据checked状态设置字体粗细
    targetLabel.css('font-weight', this.checked ? 'bold' : '400');
  });
});

这样每个复选框的状态都是独立的，不会出现全局变量导致的混乱问题。

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