Checkbox never checked in custom component

I have a simple custom component which uses a checkbox. For whatever reason the the checkbox is not being set to checked even thought it is being checked.

 

Here is the JS:

---

sap.designstudio.sdk.Component.subclass("com.company.Treeview", function() {     var that = this;     var meta_data = null;          // Layout.     this.paddingDiv = null;     this.masterUL = null;               // Properties.     this._data = null;     this._selectedItems = null;     // Property changes.     this._valueChanged = true;     this._selectedItemsChanged = true;     this.init = function() {          this._valueChanged = true;          this._selectedItemsChanged = true;                    // Padding div.          this.paddingDiv = document.createElement("DIV");                    this.masterUL = document.createElement("UL");                    $(this.paddingDiv).css({               padding:"10px"          });          var htmlText = "";          for (var i = 0; i < 5; i++){               htmlText = htmlText + "

• List Item "+ i +"

";          }          $(this.masterUL).html(htmlText);                    $(this.paddingDiv).appendTo(this.$());          $(this.masterUL).appendTo(this.paddingDiv);                    // Click handler.          this.$().click(function() {               that.fireEvent("onclick");          });          // Layout.          this.$().css({               lineHeight: "normal", // Fix for SAPUI5 lineheight=0.               borderStyle:"solid",               borderWidth:"1px",               borderColor:"lightgray",               backgroundColor:"white"          });     };     this.metadata = function(value) {          if (value === undefined) {               return meta_data;          } else {               meta_data = value;               return this;          }     };     this.data = function(value) {          if (value === undefined) {               return this._data;          } else {               this._data = value;               this._valueChanged = true;               return this;          }     };          this.selectedItems  = function(value) {          if (value === undefined) {               return this._selectedItems;          } else {               this._selectedItems = value;               this._selectedItemsChanged = true;               return this;          }     };          this.getChecked = function () {          var checkedItems = "";          var elementID = "";          $(this.masterUL).find("input").each(function()           {               elementID = $(this).attr("id");               checkedItems = checkedItems + "," + $(this).val() + " - " + document.getElementById(elementID).checked;               });          return checkedItems;     }     this.updateSelectedItems = function() {          this._selectedItems = this.getChecked();          this.firePropertiesChanged(["selectedItems"]);     };          this.afterUpdate = function () {                    if (this._selectedItemsChanged) {               this._selectedItemsChanged = false               this.updateSelectedItems();          }     }               var entityMap = {          "&": "&",          ""'\/]/g, function (c) {               return entityMap[c];          });     }; });

---

I've tried many different combinations for the getCheck function including:

---

     this.getChecked = function () {          var checkedItems = "";          $(this.masterUL).find("input:checked").each(function()           {               checkedItems = checkedItems + "," + $(this).val();          });          return checkedItems;     }     this.getChecked = function () {          var checkedItems = "";          $(this.masterUL).find("input").each(function()           {               checkedItems = checkedItems + "," + $(this).val() + " " + $(this).is( ":checked" );          });          return checkedItems;     }     this.getChecked = function () {          var checkedItems = "";          $(this.masterUL).find("input").each(function()           {               checkedItems = checkedItems + "," + $(this).val() + " " + $(this).prop( "checked" );          });          return checkedItems;     }     this.getChecked = function () {          var checkedItems = "";          $(this.masterUL).find("input").each(function()           {               checkedItems = checkedItems + "," + $(this).val() + " " + $(this).attr( "checked" );          });          return checkedItems;     }     this.getChecked = function () {          var checkedItems = "";          $(this.masterUL).children("input:checked").map(function() {          {               return this.name;          });          return checkedItems;     }

---

Maybe I'm not firing an event in the correct area.

 

Will someone please help me out?