unable to initialize the value of a ui-only checkbox field.

I have a UI field “boolIsPlanSelected” which is defaulted to “false” i.e. checkbox unchecked.
I am using this field just to toggle between the images of checked and unchecked checkbox. So when a user clicks an unchecked checkbox, the image should be flipped to a checked one and vice versa.

On the page load, the image of unchecked checkbox should be present, which requires me to check the value of this ui-only field in the rendering section of the image.

Now when i console.log the value of the ui-only field in the js snippet that runs on the click of the unchecked checkbox image, the value of the ui-only field is found to be “null”.Why is the Default value not being considered?

var selectedItem = arguments[0].item,
    selectedList = arguments[0].list,
    selectedModel = arguments[0].model,
    selectedPlanRow = selectedItem.row;
    console.log('selectedPlanRow.boolIsPlanSelected = '+selectedPlanRow.boolIsPlanSelected);
    if(selectedPlanRow.boolIsPlanSelected){
        selectedPlanRow.boolIsPlanSelected = false;
    }
    else{
        selectedPlanRow.boolIsPlanSelected = true;
    }
    console.log('selectedPlanRow.boolIsPlanSelected 2 = '+selectedPlanRow.boolIsPlanSelected);