单击复选框后，我的复选框更改事件不起作用。 我正在使用bootstrap和jquery

Question

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.

Answer 1

Please let me know if this helps:

Here is the JS code. I removed the lone call of checkDeliveryAddress(), and the .deliveryCheckbox class from some of your container divs, instead leaving that class only for the labels where you want the checkboxes. Clicking on the checkboxes calls the checkDeliveryAddress function. Here is a codepen :

// 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();
    }
  }

  $(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();

  })

Here is the HTML:

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

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

              <div class="col-sm-12">
                <div class="form-element ">
                  <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 ">
                    <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>

Answer 2

Try removing unnecessary code from the function and terminate lines with ";"

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("change", ":checkbox", function () {
  alert("Hey, something clicked."); 
  checkDeliveryAddress();
});

Answer 3

Make sure that you have included jquery in reference. Here's a working code. plnkr.co/edit/JLsfRfTOjTIuPuL1aeuH?p=preview

Answer 4

Ok, so you need to use $(document).on("click", ":checkbox", function() { for all your checkboxes.

Secondly, I have removed / optimized / compressed the code in your function.

You should chain them wherever possible, instead of getting the selector and using it again. For example, removeAttr("disabled").text('').focus()

Below is the updated code:

 function checkDeliveryAddress() { $(".deliveryAddress").show(); if ($('#centreDelivery').is(':checked')) { $(".deliveryAddress").hide(); } $("#deliveryAddress").removeAttr("disabled").text('').focus(); 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"); } } checkDeliveryAddress() $(document).on("click", ":checkbox", function() { console.log("Hey, something clicked."); checkDeliveryAddress(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>