使用 Javascript 一次检查所有复选框答案

【问题标题】：Checking all checkboxes at once with Javascript使用 Javascript 一次检查所有复选框
【发布时间】：2012-02-10 17:37:19
【问题描述】：

此功能仅在我一一选中复选框时才提醒正确的totalqt。但不适用于#check_all：alerts 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>

【问题讨论】：

.click() 只会触发事件处理程序，但不会真正改变状态或触发默认操作。
Check/Uncheck all checkboxes 的可能重复项

标签： javascript jquery checkbox triggers

【解决方案1】：

实际上，当手动更改复选框时，它不会触发处理程序。试试这样的。

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);
           });
      }

} );

【讨论】：

显示屏幕screencast.com/t/c7GlBjwdh5X 以检查所有勾选。取消勾选时 - 根本不取消勾选任何内容

【解决方案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);
});

【讨论】：