Checkbox data-bind with boolean property issue for polymer component

Difficulty with Boolean property binding. I want to bind a boolean property 'status' to two different checkboxes.

Functionaliy

When any one checkbox is checked other checkbox should also be checked. Same for uncheck condition as well.

• When checkbox is on/off respective border-color, background-color & text-color should be applied.
• True/False button will set 'ON'/'OFF' checkboxes and change circle properties as well.

  <dom-module id="polymer-component">
    <template>
      <input
        type="checkbox"
        id="id1"
        checked=""
        on-tap="circleChange1"
      />Value1
      <br />
      <input
        type="checkbox"
        id="id2"
        checked=""
        on-tap="circleChange1"
      />Value2
      <br />
      <div id="" class="circle">
        <span class="innerTEXT">D88</span>
      </div>
      <br />
  
      <div><span>Status : </span></div>
      <button id="button" on-tap="fn">False</button>
      <button id="button" on-tap="fn1">True</button>
    </template>
    <style>
      .circle {
        border: 1px solid #dadada;
        background-color: #f7f7f7;
        color: #555555;
        box-sizing: border-box;
        height: 35px;
        width: 36px;
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        margin-left: 100px;
        margin-top: -42px;
        position: absolute;
      }
      .innerTEXT {
        position: relative;
        left: 9px;
        font-size: 9px;
        height: 11px;
        width: 23px;
        font-family: Roboto;
        letter-spacing: 0;
        margin: auto;
        top: 5px;
      }
    </style>
    <script>
      Polymer({
        is: "polymer-component",
        properties: {
          status: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
          },
        },
  
        fn: function () {
          this.status = false;
          this.circleChange();
        },
  
        fn1: function () {
          this.status = true;
          this.circleChange();
        },
  
        circleChange: function (e) {
          let circle = document.getElementsByClassName("circle");
          circle = [...circle][0];
  
          if (!this.status) {
            // Disabled
            circle.style.color = "#555555";
            circle.style.backgroundColor = "#F7F7F7";
            circle.style.borderColor = "#DADADA";
          } else {
            // Unselected
            circle.style.color = "#555555";
            circle.style.backgroundColor = "#FFFFFF";
            circle.style.borderColor = "#DD0000";
          }
        },
  
        circleChange1: function (e) {
          console.log(
            e.target,
            "Checked",
            e.target.checked,
            "Status",
            this.status
          );
  
          let circle = document.getElementsByClassName("circle");
          circle = [...circle][0];
  
          if (!this.status) {
            // Disabled
  
            circle.style.color = "#555555";
            circle.style.backgroundColor = "#F7F7F7";
            circle.style.borderColor = "#DADADA";
          } else {
            // Unselected
  
            circle.style.color = "#555555";
            circle.style.backgroundColor = "#FFFFFF";
            circle.style.borderColor = "#DD0000";
          }
        },
      });
    </script>
  </dom-module>
  
  
  When I use False & True buttons to update the values, they are working fine. (Both Checkbox & Circle are updated)
  But on using the checkbox, the circle is not updating properly. Because the property assigned to input on those checkboxes is inverse of its value. Even though I assigned it to the checked attribute.
  
  [CodePen- Code Reference][1]
  
  
    [1]: https://codepen.io/pen/?__cf_chl_jschl_tk__=0d57d18db59a75a9850a8544029900086ff4e6af-1591874610-0-AZysAbWSb5JxLLWSqB-nXHNo9CT7eVB19vG0CX3mOLJgFTAHAjJ2ogUtF_WInB7s9jvLXizkKM7YnDfqNgdbi-4TLaOUdT8Et8yiILSIf49pfE0hQqhluRI7xRuk90CDSCX3BAl6bMOuL_P2ciJoTqaTJ8fajtPYDCTkDiDv-8O9RQdp9QAilDUnjXz8vkeK0UWyqXtDbXwJPLXU4tf_fKTTRhvv6PuTKHYed7aEolB9nH6LmnmXvSjlXBXGV1I-ZVsG-Q4nAmvFtRqHjgeaiT9sV88N2huXVZ6m1IILj7O2NBFKBH-TkX09O4sNBz2mcxu8UEjg-PmlrVI9meb2HKY