Input checkbox and ion-checkbox showing boxed checked even though value is false

ionic-v1
1

This is driving me crazy. I am almost thinking this is a bug at this point.

When a page loads the controller, it checks for window.localStorage values…if not set, set the defaults, if set, then set the checkbox’s to true or false based on the saved value. But even after a fresh install, I go to the tab, see the console.log values for the checkboxes as “false”, yet both checkboxes are CHECKED.

I started with ion-checkbox and when I couldn’t correct the issue I moved to a standard checkbox. But in both cases, console messages display “temp” as false, assign it to the $scope OR the getElementById (depending on which one I am using) and the rendered pages shows the checkbox’s as checked. I even tried changing false to “” and true to “checked” - nothing changes though.

HTML

 <ion-checkbox style="border:0px;float:right;padding-left:24px;padding-top:5px" ng-model="bikeItem.Avail" ng-checked="bikeItem.Avail" ng-change="bikes('Avail','checked',1)"></ion-checkbox>
 <input type="checkbox" id="bikesAvail" checked="{{bikeItem.Avail}}" style="border:0px;float:right;padding-left:24px;padding-top:5px" ng-click="bikes('Avail','checked',0)"></input>

CONTROLLER:

  $scope.bikeItem = [] ;
  var bikeKeys = {Shub:"value",Ehub:"value",Avail:"checked",Spots:"checked"} ;
  var x=0 ;
  for (var keyObj in bikeKeys) {
    var key = keyObj ;
    var keyValue = bikeKeys[keyObj] ;
    var temp = window.localStorage.getItem("bikes"+key) ;
    if (temp == null || temp == "" || temp == "undefined") {
      if (x < 2) {
        temp = 3 ;
      } else if (x > 1) {
        temp = false ;
      }
      console.log("A Init: "+key + " :"+keyValue + ": " + temp) ;
      $scope.bikeItem[key] = temp ;
      window.localStorage.setItem("bikes"+key,temp) ;
      document.getElementById("bikes"+key)[keyValue] = temp ;
      console.log("B : "+document.getElementById("bikes"+key)[keyValue]) ;
    } else {
      console.log("C Init: "+key + " :"+keyValue + ": " + temp) ;
      $scope.bikeItem[key] = temp ;
      document.getElementById("bikes"+key)[keyValue] = temp ;
      console.log("D : "+document.getElementById("bikes"+key)[keyValue]) ;
    }
    x++ ;
   }

The above console messages prints:
“A Init: Avail: checked: false”
“B : true” ;

I mean, the two lines above console message B are stating the value is FALSE and assigning the $scope.bikeItem.Avail = false AND document.getElmentById(“bikesAvail”).checked = false ; - yet both types of checkboxes are getting assigned true and showing up checked.

And when I leave the page and come back console messages C&D fire (because those values are now stored in localStorage), both show temp=false, yet the checkboxes are still checked.

However, the correct values are being passed to the <input type=“text”…> just fine. The first time load default is 3, leave the page and come back and they are three…users changes them to whatever, leave page and come back and the user value is showing. Its just the two checkbox’s.

2

For standard <input type="checkbox"> I found the following:

ver temp = document.getElementById(id).checked ; // this returns “false” or “true”

But when I assign the elementID.checked as “false” the checkbox shows up as checked. If I convert the “false” to “” or the “true” to “checked” everything seems to work fine. So apparently Android Chorme browser though returns el.checked as true or false, it doesn’t use those values during assigning (ie: el.checked = false/true) to check/uncheck the actual checkbox - it only likes “checked” & “”

I have not tried the above with ion-checkbox yet…but according to ion documentation, ion-checkbox should honor true/false values - but when I did use them as specified, false still showed up as a checked checkbox.

3

I tried the above <input type="checkbox"> solution with the ion-checkbox and it did not work. I can console.log the values of $scope.bikeItem[key] after assignment, see that it is false, yet the checkbox is still showing up as checked.

in the <ion-checkbox> I tried with both ng-model=“bikeItem.Avail” and ng-checked=“bikeItem.Avail” as well as one versus the other…everytime, console.log shows value as false, yet checkbox is checked.

4

I have the same problem, here is my code :

<ion-label stacked gold> All</ion-label> <ion-checkbox [ngFormControl]="all"></ion-checkbox >

the checkbox appears checked and i can’t figure out how to set it unchecked by default

5

I don’t know if your issue is the same as mine but I figured mine out. I am using window.localStorage.setItem/getItem to store local user settings & values. localStorage is TEXT only, it doesn’t store boolean values.

So setting: window.localStorage.setItem(“thisValue”,true) - it actually stores true as a string “true”. Thus when reading it back in via :

var temp = window.localStorage.getItem(“thisValue”) ; // its giving you a string back, not a valid boolean.

Then when you try to set your checkbox.checked = temp, you arent’ feeding a true/false…you are feeding it “true”/“false”. To get around this you must either convert it to 0/1 upon writing it to setItem…and/or convert it back from “true” to true upon getItem.