如何使用jQuery为每个关联复选框的Label切换类？

原代码的核心问题 #

1. JS逻辑完全写反：先给元素加checkbox-active类，接着又判断如果有这个类就先移除再添加，等于做了无用功，根本实现不了切换效果。
2. HTML不规范：
   • 两个label用了相同的id="selector-wrapper"，HTML要求ID必须唯一，这会导致后续选择器操作出问题。
   • label标签未闭合，每个input没被对应的label正确包裹，结构存在语法错误。

修正后的完整代码 #

修复后的HTML #

<div class="sc-97ae821b-0 kgLRyG">
    <label class="sc-dc4336f8-0 jEDHBt sc-b5b652d3-0 eRKHhZ sc-97ae821b-1 jqCZMD problem-label" tabindex="0">
        <input name="problemAreas" type="checkbox" class="sc-dc4336f8-1 hvrnmr" value="CHEST">
    </label>
    <label class="sc-dc4336f8-0 jEDHBt sc-b5b652d3-0 eRKHhZ sc-97ae821b-1 jqCZMD problem-label" tabindex="0">
        <input name="problemAreas" type="checkbox" class="sc-dc4336f8-1 hvrnmr" value="HAND">
    </label>
</div>

最简JS实现（用jQuery原生方法） #

jQuery自带toggleClass方法，直接搞定类的切换，不用自己写判断：

$(function() {
    $('.sc-dc4336f8-0').click(function(e) {
        // 阻止默认事件，避免input的点击行为干扰（可选，按需调整）
        e.preventDefault();
        // 一键切换类
        $(this).toggleClass('checkbox-active');
        // 同步checkbox的选中状态，保证视觉和表单数据一致
        $(this).find('input').prop('checked', $(this).hasClass('checkbox-active'));
    });
});

手动实现切换逻辑（不用toggleClass） #

如果不想用原生方法，修正原逻辑即可：

$(function() {
    $('.sc-dc4336f8-0').click(function(e) {
        e.preventDefault();
        const $currentLabel = $(this);
        if ($currentLabel.hasClass('checkbox-active')) {
            $currentLabel.removeClass('checkbox-active');
        } else {
            $currentLabel.addClass('checkbox-active');
        }
        // 同步checkbox状态
        $currentLabel.find('input').prop('checked', $currentLabel.hasClass('checkbox-active'));
    });
});

额外提示 #

一定要同步checkbox的选中状态，不然视觉上显示选中了，但表单提交时实际没选中，会导致数据不一致的问题。

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