檢查一次所有的複選框的JavaScript

Question

此功能警報右totalqt只有當我檢查複選框一個接一個。但不適用於#check_all正常工作：警報totalqt = 0

我沒有什麼錯的，任何人都可以解釋一下嗎？

var totalqt=0; 
    $('#check_all').click(function() { 
     $('.checkbox').click();  
     alert(totalqt); 
    });  


$('.checkbox').click(function(e) { 
     e.stopPropagation(); 
     if($(this).closest("tr").not('#hdr').hasClass("row_selected")){ 
      $(this).closest("tr").not('#hdr').removeClass("row_selected"); 
      totalqt=totalqt - parseInt($(this).closest("tr").find("#qt").text(), 10); 
     } 
     else { 
      $(this).closest("tr").not('#hdr').addClass("row_selected"); 
      totalqt=totalqt + parseInt($(this).closest("tr").find("#qt").text()); 
     } 

HTML看起來像

<tr> 
... 
<td><input type="checkbox" name="checkbox[]" method="post" value="" class="checkbox"/></td> 
... 
</tr> 

Answer 1

實際上當複選框被改變manualy它不會觸發處理程序。嘗試這樣的事情。

function doIt(obj){ 
     if($(obj).closest("tr").not('#hdr').hasClass("row_selected")){ 
      $(obj).closest("tr").not('#hdr').removeClass("row_selected"); 
      totalqt=totalqt - parseInt($(obj).closest("tr").find("#qt").text(), 10); 
     } 
     else { 
      $(obj).closest("tr").not('#hdr').addClass("row_selected"); 
      totalqt=totalqt + parseInt($(obj).closest("tr").find("#qt").text()); 
     } 
} 

然後

$('.checkbox').click(function(e) { 
     e.stopPropagation(); 
     doIt(this); 
}); 

和

$('#check_all').click(function() { 
     if($(this).prop('checked')){ 
      $('.checkbox').each(function(){ 
       $(this).prop('checked', true);  
       doIt(this); 
       alert(totalqt); 
      }); 
     }else{ 

      $('.checkbox').each(function(){ 
       $(this).prop('checked', false);  
       doIt(this); 
       alert(totalqt); 
      }); 
     } 

}); 

Answer 2

我已經改變了我的回答以下，試試這個：

<div class="checkall"> 
    <input type="checkbox" id="checkall"> 
</div> 
<div id="list"> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
</div> 

和jQuery：

var checkboxes = $(":checkbox", "#list").change(function() { 
    var allIsChecked = checkboxes.length === checkboxes.filter(":checked").length; 

    checkAll[0].checked = allIsChecked; 

}）;

var checkAll = $("#checkall").change(function() { 
     checkboxes.prop("checked",this.checked); 
});