Cannot find element in Polymer element using Polymer.dom(this.root).querySelector

I have the following Polymer element

<dom-module id="bps-boolean-field">
  <template>
    <style>

    </style>

    <div class="boolean-field-body">

      <div class="boolean-label" id="booleanLabel">[[_convertCamelCaseToRegular(label)]]</div><div id="mandatoryMark" class="mandatory">&#42;</div>
      <label class="switch">
        <input id="checkbox" type="checkbox" onclick="[[_updateReturnValue]]">
        <span class="slider round"></span>
      </label>
    </div>

  </template>
  <script>
    class BpsBooleanField extends Polymer.Element {
      static get is() { return 'bps-boolean-field'; }

      static get properties() {
        return {
          label : {
            type : String
          },
          description : {
            type : String
          },
          defaultValue : {
            type : Boolean
          },
          returnValue : {
            type : String
          },
          mandatory : {
            type : Boolean
          }
        }
      }

      _updateReturnValue(evt){
        //var toggleSwitch = Polymer.dom(this.root).querySelector("#checkbox");
        console.log(evt);
        //var toggleSwitch = document.getElementById('checkbox');
        if(Polymer.dom(this.root).querySelector("#checkbox").checked === true){
          this.returnValue = "true";
        } else if (Polymer.dom(this.root).querySelector("#checkbox").checked === false) {
          this.returnValue = "false";
        }
        console.log("Switch toggled, return value is:"+this.returnValue);
      }

      connectedCallback(){
        super.connectedCallback();
        //console.log("Check for mandatory:"+this.mandatory);

        if(this.mandatory === true){
          Polymer.dom(this.root).querySelector("#mandatoryMark").style.display = 'block';
        } else {
          Polymer.dom(this.root).querySelector("#mandatoryMark").style.display = 'none';
          Polymer.dom(this.root).querySelector("#booleanLabel").style.float = 'none';
        }

        if(this.defaultValue !== ""){
            //console.log("Set default value of boolean field to:"+this.defaultValue);
            if(this.defaultValue === false){
              Polymer.dom(this.root).querySelector("#checkbox").checked = false;
            } else if (this.defaultValue === true) {
              Polymer.dom(this.root).querySelector("#checkbox").checked = true;
            }
        } else {
          Polymer.dom(this.root).querySelector("#checkbox").checked = false;
        }
      }
    }


    customElements.define(BpsBooleanField.is, BpsBooleanField);
  </script>
</dom-module>

In connectedCallback(), once my polymer element loads, it presets whether the checkbox should be checked or not. I have tested this and it works successfully.

Now I am trying to update my property of returnValue whenever the checkbox is clicked on. However, when I try to check the checked state of the checkbox, I get an error:

Uncaught TypeError: Cannot read property 'checked' of null
    at HTMLInputElement._updateReturnValue (bps-boolean-field-latebinding.html:136)

It's not able to find the element in this case and I get an error. What am I doing wrong? How can I check the checked state of my checkbox?