檢查jQuery是否在頁面本身中選中復選框

Question

我在.Net MVC 3頁面中有以下復選框和span標簽，

@Html.CheckBoxFor(m => m.CheckedStatus, new Dictionary<string, object> { { "id", "cbCheckedStatus7" }, { "name", "cbCheckedStatus" }, { "class", "onchange" } })
<span id="spBlueCheckbox" style="display: none; color: blue;"> Some message</span>

jQuery：

jQuery(function ($) {
        $('#cbCheckedStatus7').on('change', function () {            
            $('#spBlueCheckbox').slideToggle(this.checked);
        });

如果選中此復選框，則我需要顯示span標簽，否則將其隱藏。 最初，spab標簽是隱藏的。

我已經編寫了jquery來執行上述方案，但是只有當我用鼠標手動單擊時它才起作用。 我需要的是，當我從上一頁導航到此頁面時，默認情況下會根據DB標志選中該復選框，但不會顯示span標簽。

Answer 1

您可以使用：

if($('#cbCheckedStatus7').is(':checked')){
   $('#spBlueCheckbox').show();
}

Answer 2

在頁面加載的jquery下面調用：

$(document).ready(function(){
    // do initial check and make show / hide
    if($('#cbCheckedStatus7').is(':checked')){ // check if checkbox checked
       $('#spBlueCheckbox').show();
    }

   // add change handler
   $('#cbCheckedStatus7').on('change', function () {            
       $('#spBlueCheckbox').slideToggle(this.checked);
    });
});

Answer 3

嘗試這個

$(document).ready(function(){
     ($('#cbCheckedStatus7').is(':checked')) ? $('#spBlueCheckbox').show(); : $('#spBlueCheckbox').hide();
})

Answer 4

編輯您的代碼：

jQuery(function ($) {
        $('#cbCheckedStatus7').on('change', function () { 
        if(this.checked)           
            $('#spBlueCheckbox').show();//or slide up or down
        else
            $('#spBlueCheckbox').hide();//or slide up or down
        });

並將其添加到包含復選框的頁面末尾

$('#cbCheckedStatus7').change();