Bootstrap：當label.btn中的複選框時，更改事件不起作用。

Question

我有引導V3.3和我有以下checkbox ES風格的按鈕：

 <div class="btn-group transactionSheetToolbarStatusToggle" data-toggle="buttons"> 
      <label class="transactionSheetToolbarShowDraft btn btn-default active"> 
       <input type="checkbox" autocomplete="off" checked="checked">Draft 
      </label> 
      <label class="transactionSheetToolbarShowFinalised btn btn-default active"> 
       <input type="checkbox" autocomplete="off" checked="checked">Finalised 
      </label> 
      <label class="transactionSheetToolbarShowVoid btn btn-default"> 
       <input type="checkbox" autocomplete="off">Voided 
      </label> 
     </div> 

使用jQuery，我似乎有問題獲取複選框的事件。

我曾嘗試：

$('.transactionSheetToolbarShowDraft input[type="checkbox"]').change(function() {...}); 

，但它似乎並不認爲該事件已被觸發。

我也曾嘗試：

$('.transactionSheetToolbarShowDraft input[type="checkbox"]').click(function() {...}); 

但同樣，它似乎並不認爲該事件已被觸發。 然後，我有這樣的：

$('.transactionSheetToolbarShowDraft').click(function() {...}); 

事件被觸發，但似乎有什麼不對勁...... 的問題出現時，我試圖讓checkbox的:checked狀態。

$('.transactionSheetToolbarShowDraft').click(function() { 
    var checkbox = $(this).find('input[type="checkbox"]'); 
    if (checkbox.is(':checked')) { 
     console.log('is checked!'); 
    } else { 
     console.log('not checked...'); 
    } 
}); 

:checked狀態似乎相反！我做了一些調試並追蹤了這個問題。其原因在於，label被點擊並且其click事件被觸發，checkbox尚未更新。在checkbox更新其檢查狀態之前，基本上調用了change事件處理程序。 作爲絕望，我想出了下面的技巧：

$('.transactionSheetToolbarShowDraft').click(function() { 
    var checkbox = $(this).find('input[type="checkbox"]'); 
    setTimeout(function() { 
     if (checkbox.is(':checked')) { 
      console.log('is checked!'); 
     } else { 
      console.log('not checked...'); 
     } 
    }, 10); 
}); 

這似乎是工作......除了使用具有setTimeout calll來處理事件，這絕不是一個好的做法。

所以我只想看看有沒有人有更好的解決方案呢？或者我做錯了什麼？

Answer 1

這將觸發checked/Unchecked事件。

$('.transactionSheetToolbarShowDraft').on('click','input',function() { 
 
    var checkStatus = ($('input').prop('checked'))? 'is checked!': 'not checked...'; 
 
    console.log(checkStatus); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-group transactionSheetToolbarStatusToggle" data-toggle="buttons"> 
 
      <label class="transactionSheetToolbarShowDraft btn btn-default active"> 
 
       <input type="checkbox" autocomplete="off" checked="checked">Draft 
 
      </label> 
 
      <label class="transactionSheetToolbarShowFinalised btn btn-default active"> 
 
       <input type="checkbox" autocomplete="off" checked="checked">Finalised 
 
      </label> 
 
      <label class="transactionSheetToolbarShowVoid btn btn-default"> 
 
       <input type="checkbox" autocomplete="off">Voided 
 
      </label> 
 
     </div>