当checkbox被选中并且有一个持久化值时触发事件

Question

我使用大蒜.js来保存复选框的输入状态(http://garlicjs.org/)。它工作得很好，但由于某些原因，jQuery不能识别在页面重新加载后输入是否被蒜头js检查。

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

例如，如果我在样式表中设置了#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不能识别输入状态?我用错代码了吗?

Answer 1

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

$(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");
    }  
 });

Answer 2

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

看看推迟考试的事。可以使用$(window).on("load", function(){...})作为alt

Answer 3

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

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

其他方法不一定保证在所有浏览器/jQuery版本中工作。请参阅这篇有用的文章设置"检查"。.