Unchecking checkbox using different Id's

I have the following 2 checkboxes that i need to deselect once the other one is selected.

  <div class="header">
           <h3 class="checkout-headers">STEP 3 - Billing Information </h3>
          <!--START: sameAsBilling1-->
<!--value="ON"-->
          <div class="sameAsBilling1">
            <input type="checkbox" name="sameAsBilling" id="sameAsBilling" value="1" onclick="showHideShipping();check_address('');"/>
            <label for="sameAsBilling">Same as Delivery Address</label>
            <div class="clear"></div>
          </div>
            <div class="differentBilling">
                <input type="checkbox" class="example" id="check2" value="2" onclick="myFunction2()"; return false;>Different Billing Address?</div>
          <!--END: sameAsBilling1-->
          <div class="clear"></div>
        </div>

The function i'm using is this;

  <script>
        var chk1 = document.getElementById("sameAsBilling");
var chk2 = document.getElementById("check2");

//check the other box
chk1.on('click', function(){
  if( chk1.is(':checked') ) {
    chk2.attr('checked', true);
  } else {
    chk2.attr('checked', false);
  }
});
</script>

I'm getting the following error;

Uncaught TypeError: chk1.on is not a function