当另一个复选框“激发”时，不会触发Checkbox .change（）事件

Question

I'm using a checkbox to check all other checkboxes in a table.
After a checkbox being checked INSIDE the table (on change) I sum up every textbox value in the same tr.



On IE11 and below (it's important for me that it works in EVERY browser) the first change of the "all" checkbox just tick the others, but doesn't sum up the textbox values.
On the second click he sums up but untick the checkboxes.
So it works in the wrong way because the first "change" is ignored or sth.

Sorry for my bad english and bad description.

<thead>
    <tr>
        <th>Auswahl <input type="checkbox" id="allcheck" /></th>
        <th>Kunden-Nr.</th>
        <th>Personal-Nr.</th>
        <th>Vorname</th>
        <th>Name</th>
        <th>Gutscheintyp</th>
        <th>Betrag €</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="center"><input type="checkbox" name="check" /></td>
        <td align="left">1</td>
        <td align="left">2</td>
        <td align="left">3</td>
        <td align="left">4</td>
        <td align="left" class="typ">5</td>
        <td align="center" class="texttd">
        <input type="text" class="txt" maxlength="5" onclick="this.select()" value="20.00" /></td>
    </tr>
</tbody>
    <tfoot>
        <tr>
            <th colspan="5"></th>
            <th colspan="1"">Summe</th>
            <th colspan="1" id="sum">0,00</th>
        </tr>
    </tfoot>

allcheck is the id of the checkbox, checking all others. :)

// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
    var checkedStatus = this.checked;
    $('table tbody').find('input[type="checkbox"]').each(function () {
        $(this).prop('checked', checkedStatus);
    });
});



// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('input[type="checkbox"]').change(function() {
    var sum = 0.00;
    $("table tr td input:checked").each(function(){
        test = $(this).closest('tr').find('input[type="text"]').val();
        test = test.replace( ",",".");
    if (isNaN(test)) {
        sum = 0.00;
    }
        sum += parseFloat(test, 10);
    $("#sum").html(sum.toString().replace(".",","));
});
    sum = parseFloat(sum, 10);
    sum = sum.toFixed(2);
    $("#sum").html(sum.toString().replace(".",","));
});

I hope these information are enough for you to help me a little. :)

Answer 1

instead of click event use change event for all check checbox. on change will fire after changing to new value and this.checked will give you correct value :

$('#allcheck').change(function() {
    var checkedStatus = this.checked;
    $('table tbody').find('input[type="checkbox"]').each(function () {
        $(this).prop('checked', checkedStatus);
    });
});

Answer 2

Seems that changing "checked" property does not always trigger "change" event.

So you must move your sum calculation into separate function and call it explicitly in "#allcheck" click handler

(also cleaned your code a bit)

// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
    var checkedStatus = this.checked;
    $('table tbody').find('input[type="checkbox"]').each(function () {
        $(this).prop('checked', checkedStatus);        
    });
    updateSum();
});

// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('tbody input[type="checkbox"]').change(updateSum);

function updateSum() {
    var sum = 0.00;
    $("tbody input:checked").each(function(){
        var test = $(this).closest('tr').find('input[type="text"]').val();
        var testNum = parseFloat(test.replace( ",", "."));
        if (!isNaN(testNum)) {
            sum += testNum;
        }        
    });    
    $("#sum").text(sum.toFixed(2).replace(".",","));
}

JSFiddle