El evento Checkbox .change() no se activa cuando lo "activa" otra casilla de verificación

Question

Estoy usando una casilla de verificación para marcar todas las demás casillas de verificación en una tabla.
Después de marcar una casilla de verificación DENTRO de la tabla (al cambiar), resumo cada valor del cuadro de texto en el mismo tr.

Funciona bien en Firefox y Chrome.

En IE11 y versiones inferiores (para mí es importante que funcione en TODOS los navegadores), el primer cambio de la casilla de verificación "todos" simplemente marca las demás, pero no resume los valores del cuadro de texto.
En el segundo clic, resume pero desmarca las casillas de verificación.
Entonces funciona de manera incorrecta porque el primer "cambio" se ignora o algo así.

Perdón por mi mal inglés y mi mala descripción.

<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 es la identificación de la casilla de verificación, marcando todas las demás.:)

// 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(".",","));
});

Espero que esta información sea suficiente para que me ayudes un poco.:)

Answer 1

Parece que la propiedad cambiante "marcada" no siempre desencadena el evento "CAMBIO".

Por lo tanto, debe mover su cálculo de suma a una función separada y llámelo explícitamente en "#AllCheck", haga clic en Handler

(también limpió su código un poco)

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

Answer 2

en lugar de click uso de eventos change evento para todos marque la casilla de verificación.al cambiar se activará después de cambiar al nuevo valor y this.checked le dará el valor correcto:

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