单击时，我的复选框更改事件不起作用。我正在使用引导程序和 jquery

Question

我希望每次单击复选框时都调用一个函数。但是， checkbox.click 或 checkbox.change 似乎没有触发任何事件。我也尝试过 $(document).on("click",.....) 等，但没有任何效果。

这是我的 HTML 代码。

<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>

这是我的 jquery 代码：

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

  })

我已经尝试了所有替代方法来让我的代码正常工作，但事实并非如此。当我单击第一行时，该代码有效。但是，当我点击复选框或其标签时没有响应。

Answer 1

如果这有帮助，请告诉我：

这里是 JS 代码。我从您的一些容器 div 中删除了 checkDeliveryAddress() 的唯一调用和 .deliveryCheckbox 类，而不是将该类仅用于您想要复选框的标签。单击复选框调用 checkDeliveryAddress 函数。这是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();

  })

这是 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

尝试从函数中删除不必要的代码并用“;”终止行

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

确保您已将 jquery 包含在参考中。 这是一个工作代码。 plnkr.co/edit/JLsfRfTOjTIuPuL1aeuH?p=preview

Answer 4

好的，所以您需要为所有复选框使用$(document).on("click", ":checkbox", function() {。

其次，我已经删除/优化/压缩了您函数中的代码。

您应该尽可能将它们链接起来，而不是获取选择器并再次使用它。例如removeAttr("disabled").text('').focus()

以下是更新后的代码：

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>