javascript - 检查复选框是否已使用 jQuery 在加载时检查

Question

我目前正在使用

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

效果很好，除非复选框是保存复选框状态的页面的一部分。如果一个复选框被保存为勾选，则主框（当单击该复选框时显示）在重新加载时隐藏，并且仅在单击该复选框时可见，这意味着“未选中”复选框（如预期的那样）切换）。

如果复选框已被勾选，我如何检查页面加载，在这种情况下自动触发切换？

Answer 1

这应该工作：

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

Answer 2

.toggle()接受状态 - 因此您可以在特定调用中传递是否显示或隐藏元素：

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

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

PS：如您所见，我建议使用change事件而不是click

在线演示：http: //jsfiddle.net/R4Bjw/

Answer 3

.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 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/