Question

CSS和属性存在问题：在jQuery中更改时选中了复选框。当我使用（＆＃39;＃checkbox＆＃39;）。（＆＃39;更改＆＃39;）功能时，CSS正确显示元素样式

然而，当我使用（＆＃39;＃复选框＆＃39;）。（＆＃39;点击＆＃39;）然后更改＆＃39;已检查＆＃39;在jQuery中，CSS似乎忽略了这个设置。

看起来CSS在事件被触发后应用于页面，并且在jQuery完成之前。我也试图触发＆＃34;改变＆＃34;事件手动，但没有任何成功。

有没有办法切换复选框＆＃39;点击＆＃39;并确保应用正确的CSS？

要查看此问题，请访问jsfiddle并先单击，然后单击第二个复选框

https://jsfiddle.net/porzechowski/9yoqd736/

的jQuery

$(document).ready(function () {

    /**
     /* for first checkox we can see changed color, after checkox status is changed
     /* for second checkbox attribute checked and prop is changed, but CSS is not recognizing it
     **/

    // this is code for checkbox 1 - working

    $('body').on('change', '#checkbox1', function (e) {
        e.preventDefault();
        if ($(this).attr('checked')) {
            console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
            return;
        }
        console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
    });

    // this is code for checkbox 2 - css not working
    $('body').on('click', '#checkbox2', function (e) {
        e.preventDefault();
        if ($(this).attr('checked')) {
            $(this).removeAttr('checked');
            $(this).prop("checked", false);
            console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
            return;
        }
        $(this).attr('checked', 'checked');
        $(this).prop("checked", true)
        console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
    });

});

CSS

.add-to-favorites-checkbox[type="checkbox"] + .add-to-favorites-checkbox-icon span {
width: 16px;
height: 16px;
background-color: red;
display: block;
}

.add-to-favorites-checkbox[type="checkbox"]:checked + .add-to-favorites-checkbox-icon span {
background-color: green;
display: block;
}

input {
display: none;
}

HTML

<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox1" value="1" name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox1"><span></span> Add to fav 1 </label>
</span>

<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox2" value="2" name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox2"><span></span> Add to fav 2 </label>
</span>

Answer 1

在change和{/ p>中使用$('body').on('click','#checkbox2', function() {

check this post, prop vs attr

$(document).ready(function () {

        /**
         /* for first checkox we can see changed color, after checkox status is changed
         /* for second checkbox attribute checked and prop is changed, but CSS is not recognizing it
         **/

        // this is code for checkbox 1 - working

        $('body').on('change', '#checkbox1', function (e) {
            e.preventDefault();
            if ($(this).attr('checked')) {
                console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
                return;
            }
            console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
        });

        // this is code for checkbox 2 - css not working
        $('body').on('change', '#checkbox2', function (e) {
            e.preventDefault();
            if ($(this).attr('checked')) {
                $(this).removeAttr('checked');
                $(this).prop("checked", false);
                console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
                return;
            }
            $(this).attr('checked', 'checked');
            $(this).prop("checked", true)
            console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked'));
        });

    });

.add-to-favorites-checkbox[type="checkbox"] + .add-to-favorites-checkbox-icon span {
        width: 16px;
        height: 16px;
        background-color: red;
        display: block;
    }

    .add-to-favorites-checkbox[type="checkbox"]:checked + .add-to-favorites-checkbox-icon span {
        background-color: green;
        display: block;
    }

    input {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox1" value="1"
       name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox1"><span></span> Add to fav 1 </label>
</span>

<span class="add-to-bookmark add-btn">
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox2" value="2"
       name="checkbox-favorites">
<label class="add-to-favorites-checkbox-icon" for="checkbox2"><span></span> Add to fav 2 </label>
</span>

从jQuery更改时，CSS无法识别checkbox的checked属性

1 个答案: