Fire event when checkbox is check and has a persist value by garlic.js

Question

Im using garlic.js to save input states of checkboxes (http://garlicjs.org/). It works great, but for some reason, jQuery doesn't recognise when the input is checked by garlic.js after a page reload.

Im probably missing something here, but not sure what it is.

If for example I set #myInput:checked ~ .wonka {width: 200px} in my stylesheet, Css recognize it and apply the style to .wonka every time the page load and the input get its value by garlic. Of course, using a sibling selector is very limiting (I cannot do that if the class is on the body, for example).

Doing something similar in jQuery, doesn't work:

// This is not working

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


// Neither this

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

Note: This is suposed to inmediatly fire as the page is loaded or refresh, not when is clicked by the user. The point is to fire it again when the page is refresh (or loaded from other tab), that way it would be the same as it was after the refresh.

I do can fire other events when the checkbox is "clicked" or "hover". Like this, for example:

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

But, again, this is not the problem. Why jQuery doesn't recognize the input state?, im using the wrong code?

noisiak · Answer 1 · 2013-03-24T15:14:40.577

Here is the final code for the question. As @leemo says, the problem happen because garlic.js checked the inputs after the DOM is ready, so the code here fires when the window is load, avoiding the issue.

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

hammus · Accepted Answer · 2015-10-06T00:43:28.957

1

My suspicion is that on the page reload garlic.js is applying the saved states AFTER $(document).ready() is called. Therefore when jQuery checks the state, it is actually unchecked and therefore false.

Have a look at delaying the test. Perhaps use $(window).on("load", function(){...}) as an alt.

edited Oct 06 '15 at 00:43

answered Mar 24 '13 at 05:51

hammus

2,602
2
19
37

This works, thanks!, although not with `$(window).onload()` but instead with `$(window).on("load",function() {...});`. I will put the final code in an answer. – noisiak Mar 24 '13 at 14:29

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Using the DOM object to determine whether or not a checkbox is checked is always consistent. In jQuery, you can do this with:

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

Other methods are not necessarily guaranteed to work across all browsers / jQuery versions. See this helpful post Setting "checked" for a checkbox with jQuery?.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 24 '13 at 04:25

Aiias

4,683
1
18
34

@noisiak - Note: in your initial question, you were missing quotes in your syntax for `if ($(#myInput).is(":checked")) {` which should be `if ($('#myInput').is(":checked")) {`. – Aiias Mar 24 '13 at 05:00
Ah, sorry for that typo . Although that's not the problem (the quotes are in the code). – noisiak Mar 24 '13 at 05:10

Fire event when checkbox is check and has a persist value by garlic.js

3 Answers3