使用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/