My checkbox change event is not working when clicked. I am using bootstrap and jquery

I want a function to be called everytime the checkboxes are clicked. But, the checkbox.click or the checkbox.change does not seem to trigger any event. I have also tried $(document).on("click",.....) etc., but nothing works.

This is my HTML code.

<div class="row">
              <div class="col-sm-6 deliveryCheckbox">
                <h4>Address for Delivery:</h4>
              </div>

            </div>
            <div class="row">

              <div class="col-sm-12">
                <div class="form-element deliveryCheckbox">
                  <label class="form-control deliveryCheckbox" style="border: none;"><input type="checkbox" id="centreDelivery" name="centreDelivery" class="form-control" checked="checked">Collect from Centre</label>

                </div>
              </div>

            </div>
            <div class="row deliveryAddress">

              <div class="col-sm-12">
                <div class="form-element deliveryCheckbox">
                    <label class="form-control deliveryCheckbox" style="border: none;"><input type="checkbox" id="deliveryAddressSame" name="sameDeliveryAddress" class="form-control" checked="checked">Same as above Address</label>

                </div>
              </div>

            </div>
            <div class="row deliveryAddress">
              <div class="form-element">
                <label for="deliveryAddress">Delivery Address:</label>
                <textarea class="form-control" rows="5" id="deliveryAddress" placeholder="Enter Delivery Address"></textarea>
              </div>
            </div>

And this is my jquery code:

// Managing the delivery address.


function checkDeliveryAddress(){

    if($('#centreDelivery').is(':checked')){
      $(".deliveryAddress").css('display','none');
    } else {
      $(".deliveryAddress").css('display','block');
    }
    if($('#deliveryAddressSame').is(':checked')){
      $("#deliveryAddress").text(
        $("#first_name").val() + " " + $("#last_name").val() + ", " +
        $("#address").val() + ", " + $("#city").val() + ": " + 
        $("#zip").val() + ", " + $("#state").find('option:selected').text() + ", " +
        $("#country").find('option:selected').text() + "."
      )
      $("#deliveryAddress").attr("disabled", "disabled");
    } else {
      $("#deliveryAddress").removeAttr("disabled");
      $("#deliveryAddress").text("");
      $("#deliveryAddress").focus();
    }
  }
  checkDeliveryAddress()
  $(document).on("click", ".deliveryCheckbox", function () {
    alert("Hey, something clicked."); 
    checkDeliveryAddress();

  })

  $(document).on("change", ":checkbox", function () {
    alert("Hey, something clicked."); 
    checkDeliveryAddress();

  })

  $(document).on("change", "#deliveryAddressSame", function () {
    alert("Hey, something clicked."); 
    checkDeliveryAddress();

  })

I have tried all the alternatives to get my code working, but it is not. The code works when I click on the first row. But, there is no response when I click on the checkbox or their label.