Checking all checkboxes at once with Javascript

Question

This function alerts right totalqt only when I check checkboxes one by one. But doesn't work properly for #check_all: alerts totalqt = 0.

What I did wrong, can anyone explain?

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 looks like that

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

`.click()` will only trigger the event handlers but not actually change the state or trigger the default action. — Felix Kling, Feb 10 '12 at 17:38
possible duplicate of [Check/Uncheck all checkboxes](http://stackoverflow.com/questions/4805056/check-uncheck-all-checkboxes) — Felix Kling, Feb 10 '12 at 17:39

dku.rajkumar · Accepted Answer · 2012-02-10T18:04:59.510

actually when the checkbox is changed manualy it doesn't trigger handler. try something like this.

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

then

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

and

$('#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);
           });
      }

} );

shows screen http://screencast.com/t/c7GlBjwdh5X for check all tick. When untick - doesn't untick anything at all — Tural Ali, Feb 10 '12 at 18:02

Downpour046 · Answer 2 · 2012-02-10T18:57:28.753

I have changed my answer to the following, try this:

<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>

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

Checking all checkboxes at once with Javascript

2 Answers2