javascript - 使用 jquery 将 CSS 更改回默认值的问题

Question

我可以使用 Jquery 更改页面上的其他元素，但是当它使用 ::before 时，我似乎无法切换回默认的 css 类。

默认复选框css在行动

复选框选中的 css 正在运行

现在我有一个按钮，当它被点击时，应该将我的 css 重置为默认复选框 - 但它似乎对我不起作用......按钮保持绿色并且它不会向左移动..

**

单击按钮后示例

**

CSS -

<style>


            .checkbox {
                appearance: none;
                border: 2px solid #ccc;
                border-color: red;
                border-radius: 20px;
                cursor: pointer;
                height: 24px;
                outline: none;
                position: relative;
                transition: 0.3s;
                width: 37px;
            }

                .checkbox::before {
                    background: red;
                    border-radius: 50%;
                    content: "";
                    height: 15px;
                    left: 0px;
                    position: absolute;
                    top: 2px;
                    transition: 0.3s ease-in-out;
                    width: 15px;
                }

                .checkbox:checked::before {
                    background: green;
                    transform: translateX(18px);
                }

                .checkbox:checked {
                    border-color: green;
                }

            .float-container {
                border: 3px solid #fff;
                padding: 20px;
            }

            .float-child {
                border: 2px solid red;
                padding: 20px;
                text-align-last: center;
                width: 100%;
            }

            .float-child-unknown {
                border: 2px solid red;
                padding: 20px;
                text-align-last: center;
                width: 100%;
            }
        </style>

JS-

function outsideModalClick() {
    $(document).ready(function() {
        document.getElementById('button').onclick = function() {
            $('.float-child').css('border', '2px solid red');
            $('.iconShow').toggleClass('iconhide');
            $('.checkbox:checked::before').toggleClass('.checkbox::before');
            $('.checkbox:checked').toggleClass('.checkbox');
        }
    })
}

编辑 - 仍然无法正常工作 - 没有应用 css

标签： javascriptjquerycssblazor