当复选框被选中并具有garlic.js的持久值时触发事件答案

【问题标题】：Fire event when checkbox is check and has a persist value by garlic.js当复选框被选中并具有garlic.js的持久值时触发事件
【发布时间】：2013-03-13 18:30:28
【问题描述】：

我使用garlic.js 来保存复选框的输入状态（http://garlicjs.org/）。它工作得很好，但由于某种原因，当页面重新加载后，garlic.js 何时检查输入时，jQuery 无法识别。

我可能在这里遗漏了一些东西，但不确定是什么。

例如，如果我在样式表中设置#myInput:checked ~ .wonka {width: 200px}，Css 会识别它并将样式应用于.wonka，每次页面加载并且输入通过大蒜获取其值。当然，使用兄弟选择器是非常有限的（例如，如果类在主体上，我就不能这样做）。

在 jQuery 中做类似的事情，不起作用：

// This is not working

if ($("#myInput").is(":checked")) {
    $("body").addClass("wonka");
}


// Neither this

if ($("#myInput").attr("checked")==true) {
    $("body").addClass("wonka");
}

注意：这应该在页面加载或刷新时立即触发，而不是在用户单击时触发。关键是在页面刷新（或从其他选项卡加载）时再次触发它，这样它就会与刷新后相同。

当复选框被“点击”或“悬停”时，我确实可以触发其他事件。比如这样：

$("#myInput").on("change", function(){
    $("body").addClass("wonka");
});

但是，这又不是问题所在。为什么jQuery不能识别输入状态？，我使用了错误的代码？

【问题讨论】：

标签： jquery html input checkbox

【解决方案1】：

使用 DOM 对象来确定是否选中复选框始终是一致的。在 jQuery 中，您可以这样做：

if ($('#myInput').get(0).checked == true) {
  // element is checked
}

其他方法不一定适用于所有浏览器/jQuery 版本。请参阅这篇有用的帖子Setting "checked" for a checkbox with jQuery?。

【讨论】：

@noisiak - 注意：在最初的问题中，if ($(#myInput).is(":checked")) { 的语法中缺少引号，应该是 if ($('#myInput').is(":checked")) {。
啊，抱歉打错字了。虽然这不是问题（引号在代码中）。

【解决方案2】：

我的怀疑是，在调用 $(document).ready() 之后，重新加载garlic.js 在页面上应用了保存的状态。因此，当 jQuery 检查状态时，它实际上是未检查的，因此是错误的。

看看延迟测试。也许使用$(window).on("load", function(){...}) 作为替代。

【讨论】：

这行得通，谢谢！虽然不是$(window).onload()，而是$(window).on("load",function() {...});。我会将最终代码放在答案中。

【解决方案3】：

这是问题的最终代码。正如@leemo 所说，问题的发生是因为garlic.js 在DOM 准备好后检查了输入，所以这里的代码在窗口加载时触发，避免了这个问题。

$(window).on("load",function() {
    //the .is(":checked) and .attr("checked")==true methods works fine here too
    if ($('#myInput').get(0).checked == true) {
        $("body").addClass("wonka");
    }  
 });

【讨论】：