使用jQuery重置带::before伪元素的自定义复选框为默认CSS样式失败

问题核心原因 #

1. 伪元素::before不属于DOM树中的真实节点，无法通过JS/jQuery选择器直接获取、修改它的类或样式，你写的$('.checkbox:checked::before')本身就拿不到任何元素。
2. 你对toggleClass的用法错误：该方法参数只需要传纯类名，不需要加前缀.，也不支持传入伪元素、伪类选择器；且.checkbox是复选框本身就已绑定的类，切换它没有任何意义。
3. 你的复选框选中样式完全依赖原生:checked伪类触发，不是自定义类控制的，所以你不需要修改类，只需要修改复选框的选中状态即可。

解决方案 #

你只需要在点击按钮时，将复选框的checked属性设为false，对应的选中样式就会自动失效，完全不需要操作伪元素：

// 页面加载完成后绑定按钮点击事件即可，不需要多余的嵌套
$(document).ready(function() {
    $('#button').click(function() {
        $('.float-child').css('border', '2px solid red');
        $('.iconShow').toggleClass('iconhide');
        // 直接清除所有复选框的选中状态，样式自动恢复默认
        $('.checkbox').prop('checked', false);
    })
})

补充说明 #

如果后续有需要动态修改伪元素样式的场景，通用方案是给伪元素的父元素添加/移除自定义类，再提前在CSS里写好对应类下的伪元素样式规则，示例如下：

/* 自定义类控制伪元素样式 */
.checkbox.custom-style::before {
    background: blue;
}

// 通过切换父元素类来间接控制伪元素样式
$('.checkbox').toggleClass('custom-style');

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