Webflow环境下使用jQuery自定义复选框选中样式问题求助

问题修复方案 #

1. 原有代码的核心问题 #

• 语法错误：if (!$(this).find('.checkbox-button').is(':checked') 缺少闭合右括号，会直接触发代码运行报错
• 事件逻辑问题：绑定在容器上的点击事件触发时，可能还未完成复选框的选中状态切换，导致状态判断反向

2. 优化后的实现代码 #

直接监听复选框的change事件，适配点击、键盘操作等所有触发选中状态变化的场景，不需要给每个元素设置唯一ID：

// 请放在Webflow页面设置的「正文结束代码」区域，确保DOM加载完成后执行
$(document).on('change', '.checkbox-button', function() {
    const $wrapper = $(this).closest('.checkbox-wrapper');
    $(this).is(':checked') ? $wrapper.addClass('active') : $wrapper.removeClass('active');
});

3. 配套CSS简化写法 #

不需要单独给标签、图标添加active类，通过父容器的状态控制子元素样式即可：

/* 选中状态容器背景 */
.checkbox-wrapper.active {
    background-color: #替换为你需要的背景色值;
}
/* 选中状态标签颜色 */
.checkbox-wrapper.active .checkbox-label {
    color: #fff;
}
/* 选中状态图标颜色 */
.checkbox-wrapper.active .checkbox-icon {
    color: #fff;
}

如果要隐藏原生复选框的默认样式，可给.checkbox-button添加如下样式：

.checkbox-button {
    opacity: 0;
    position: absolute;
}

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