為什么復選框的“checked”屬性返回與click事件的實際值相反的值？

Question

我有以下HTML

<li><input type="checkbox" /><label>This is the label!</label></li>

我將點擊事件綁定到li，並在執行任何其他操作之前讓click事件冒泡到li。

$('li').each(function(i){
  var item = $(this);
  var checkbox = $("input[type='checkbox']", item);

  item.bind('click', function(e){
    var isChecked = checkbox.is(':checked');
    console.log(isChecked);
    e.stopPropagation();
  });
});

從未選中的復選框開始，當click事件觸發時，isChecked在我單擊復選框時返回true，但是當我單擊標簽或li時返回false。 有誰知道為什么？

[編輯：]為了證明這個問題，請看看這個http://jsfiddle.net/nYbf6/2/ 。

1. 單擊第一個li中的復選框。
2. 單擊第二個li內部，但不在標簽或復選框上。

請注意，您永遠不能通過單擊復選框切換復選框，因為“checked”屬性始終返回單擊復選框時不存在的內容。

[編輯：]今天在這里找到答案： http ： //www.bennadel.com/blog/1525-jQuery-s-Event-Triggering-Order-Of-Default-Behavior-And-triggerHandler-.htm 。 我不喜歡這個解決方案，但它比沒有解決方案更好。

Answer 1

復選框的click事件在值更改之前觸發。 這樣，如果在覆蓋click事件時返回false，則會阻止復選框更改其值。 您應該更改事件以激活復選框，而不是包含它的li。

Answer 2

你會做的更好，以獲取相應的復選框作為的一部分click ，如下所示：

$('li').click(function(e) {
  var isChecked = $(':checkbox:checked', this).length > 0;
  console.log(isChecked);
  e.stopPropagation();
});

這會在單擊<li>時找到單擊時單擊的復選框。

至於為什么部分，如果你點擊復選框，你將其設置為true，然后事件傳播到li ，確定復選框確實已檢查。 如果您點擊標簽時未使用框，則不會選中該框，因此它仍然是錯誤的。 如果您選中了該框， 則單擊該標簽，您將看到true回來，因為現在已經檢查過了。

如果你期待的標簽，選中該復選框，則需要使用標簽對涉及它for屬性，就像這樣：

<li>
  <input id="myInput" type="checkbox" />
  <label for="myInput">This is the label!</label>
</li>

然后瀏覽器將處理連接，單擊標簽將切換復選框。

Answer 3

試試這個：

<li>
  <input type='checkbox' value='foo' id='myFavoriteCheckbox'>
  <label for='myFavoriteCheckbox'>The Label</label>
</li>

現在，當您單擊標簽時，復選框將受到影響。 將處理程序綁定到復選框並檢查.attr('checked') ，您會發現即使在click事件上，復選框的值也是正確的。 另請注意， 即使您決定停止傳播並阻止事件的默認設置 ，也是如此。 換句話說，如果您處理click事件並決定阻止默認操作，則處理程序仍會看到“已檢查”的值設置為未停止默認操作時的值。