使用jQuery檢查加載時是否已選中復選框

Question

我目前正在使用

 $("#some-box").click(function(){
     $("#main-box").toggle();
  });

除了復選框是保存復選框狀態的頁面的一部分之外，哪個效果很好。 如果復選框保存為勾選，則主框（在單擊復選框時顯示）在重新加載時隱藏，僅在單擊復選框時才可見，現在這意味着“未選中”復選框（如預期的那樣）切換）。

如果勾選了復選框，如何檢查頁面加載，在這種情況下是否自動觸發切換？

Answer 1

這應該工作：

if ($("#some-box").is(':checked')){
    $("#main-box").show();
}

Answer 2

您可以使用.attr("checked")或.prop("defaultChecked")獲取初始狀態。 但是，我認為以下是更好的方法：

function update() {
    $("#main-box")[this.checked ? "hide" : "show"]();
    // as by @zerkms, this is a different way for writing it:
    // $("#main-box").toggle(this.checked);
}
update.call($("#some-box").click(update)[0]);

對於大多數事件，只需觸發一次初始化即可，但這不適用於此 - 我們不希望自動點擊（並更改）復選框。

Answer 3

.toggle()接受狀態 - 因此您可以傳遞是否在特定調用上顯示或隱藏元素：

$("#some-box").change(function(){
     $("#main-box").toggle($(this).is(':checked'));
  });

$('#some-box').trigger('change');

PS：你可以看到我建議使用change事件而不是click

在線演示： http ： //jsfiddle.net/R4Bjw/

Answer 4

如果選中該復選框，則使用is(':checked')測試並顯示該框：

if ($('#some-box').is(':checked')) {
    $('#main-box').show();
}

然后按原樣使用您的點擊處理程序。

Answer 5

(function($) {
    var $somebox = $('#some-box'),
        $mainbox = $('#main-box');

    var toggleMain = function() {
        $mainbox.slideToggle();
    };

    if($somebox.is(':checked')) {
        toggleMain();
    }

    $somebox.on('click', toggleMain);
})(window.jQuery);

這是一個小提琴： http ： //jsfiddle.net/FX7Du/4/