點擊後，我的複選框更改事件不起作用。我正在使用bootstrap和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>