jQuery防止複選框檢查嵌套在另一個DIV

Question

我看了一下，並嘗試了很多關於此主題的答案，但似乎無法找到可行的解決方案。我可能會錯過一些明顯的東西，在這種情況下，我很抱歉，但這是我的問題：

我有一個嵌套在DIV元素中的複選框，這個DIV元素有一個附加到它的jQuery單擊事件，然後檢查複選框是否被選中或不是，然後檢查/取消選中它。取決於它是否已被選中/取消選中，然後將變量發送到PHP腳本以添加到會話變量中。

這一切工作正常，當它是DIV已被點擊，但當點擊複選框我認爲一些冒泡發生，因爲它觸發事件每次取消選中複選框。我試過使用stopPropogation();和preventDefault();附加到複選框點擊事件，但無濟於事。

下面是一些示例代碼，試圖理解得更爲清晰：

複選框HTML代碼：

<div class='bundle_offer' id='bundle_offer_0'> 
    <input type="checkbox" /> 
</div> 

點擊功能：

// Click function on bundle offer div to add booster 
$(".bundle_offer").click(function (event) { 

    // IF its not the checkbox clicked, send over the div id 
    if (event.target.type !== 'checkbox') { 

     var bundle_offer_div_id = "#"+this.id; 
     bundle_offer_click(bundle_offer_div_id); 
    } 
    // ELSE find div id and send it 
    else{ 
     var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id"); 
     bundle_offer_div_id = "#"+bundle_offer_div_id; 
     bundle_offer_click(bundle_offer_div_id); 
    } 
}); // end bundle offer click function 

的bundle_offer_click功能簡單地取點擊DIV的ID，找到複選框，選中/取消選中然後通過AJAX將適當的變量發送給PHP腳本。

編輯：

我設法輪動的邏輯位來解決這個問題，這裏是我把它改爲：

// Click function on bundle offer div to add booster 
$(".bundle_offer").mouseup(function (event) { 

    // Get whether checked or not 
    var isChecked = $(this).find('input').is(':checked'); 

    // IF its not the checkbox clicked 
    // check/uncheck 
    // send over the div id 
    if (event.target.type !== 'checkbox') { 
     if(isChecked == false){ 
      // Check 
      $(this).find('input').attr('checked',true); 
     } 
     else{ 
      // Uncheck 
      $(this).find('input').attr('checked',false); 
     } 
     var bundle_offer_div_id = "#"+this.id; 
     bundle_offer_click(bundle_offer_div_id, isChecked); 
    } 

    // ELSE find div id and send it 
    else{ 
     var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id"); 
     bundle_offer_div_id = "#"+bundle_offer_div_id; 
     bundle_offer_click(bundle_offer_div_id, isChecked); 
    } 
}); // end bundle offer click function 

主要區別是使用mouseup函數，然後做邏輯檢查/取消選中該mouseup函數中的複選框，而不是bundle_offer_click之一。

Answer 1

如果您點擊複選框瀏覽器自動檢查/取消選中複選框。你不需要使用JavaScript。

我相信裏面bundle_offer_click你正在檢查/取消選中複選框。你應該通過一個標誌作爲第二個參數bundle_offer_click標誌值應該取決於點擊元素。並在bundle_offer_click的內部根據標誌對複選框執行操作。

代碼：

function bundle_offer_click(id, isCheckBoxClicked){ 
    if(isCheckBoxClicked){ 

     //do nothing on check box 
    } 
}