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/

使用jQuery检查加载时是否已选中复选框

5 个答案: