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

@rolinger wrote:

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 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.

Posts: 1

Participants: 1

Read full topic