WordPress网站：复选框勾选时为对应文本设置字体加粗的方案咨询

嘿，我来帮你搞定这个问题！你之前用wrapInner()没成功，大概率是因为这个方法会把整个label里的内容（包括复选框）都包裹起来，多次触发还会嵌套标签，反而导致样式出问题。下面给你两种靠谱的方案，按需选择：

方案1：纯CSS实现（推荐，若能修改HTML） #

如果可以直接调整HTML结构，把“Spain”放在一个<span>里，那用纯CSS就能搞定，完全不用JS：

修改后的HTML #

<div class="checkbox">
    <label for="pais_produtores-spain">
        <input type="checkbox" id="pais_produtores-spain" class="js-wpv-filter-trigger" name="wpv-pais_produtores[]" value="spain" checked="checked">
        <span class="spain-text">Spain</span>
    </label>
</div>

对应的CSS #

/* 勾选时加粗文本 */
#pais_produtores-spain:checked + .spain-text {
    font-weight: bold;
}

/* 初始化时如果复选框已勾选，默认加粗 */
#pais_produtores-spain[checked] + .spain-text {
    font-weight: bold;
}

这样浏览器会自动根据复选框的状态切换样式，简单又稳定！

方案2：jQuery实现（无法修改HTML时用） #

如果不能改HTML，就用JS先把文本节点转成可操作的span，再通过监听复选框状态来切换样式：

第一步：添加CSS类 #

.bold-text {
    font-weight: bold;
}

第二步：jQuery代码 #

jQuery(document).ready(function($) {
    // 找到目标复选框
    const $checkbox = $('#pais_produtores-spain');
    const $label = $checkbox.parent('label');

    // 把"Spain"文本节点包裹成span，方便操作样式
    $label.contents().filter(function() {
        // 筛选出纯文本节点，且内容是"Spain"（去空格后）
        return this.nodeType === 3 && $.trim(this.nodeValue) === 'Spain';
    }).wrap('<span class="spain-text"></span>');

    // 初始化：页面加载时如果复选框已勾选，就加粗文本
    if ($checkbox.is(':checked')) {
        $label.find('.spain-text').addClass('bold-text');
    }

    // 监听复选框的勾选状态变化
    $checkbox.on('change', function() {
        // 用toggleClass自动切换样式：勾选加类，取消移除类
        $label.find('.spain-text').toggleClass('bold-text', $(this).is(':checked'));
    });
});

为什么这个方案更靠谱？ #

之前的wrapInner()会把整个label的内容都包裹，包括复选框，导致结构混乱；而这里我们精准筛选出“Spain”对应的文本节点，单独包裹成span，后续操作样式就不会影响到复选框，而且用toggleClass比反复wrap/unwrap要稳定得多。

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