O evento Checkbox .change() não dispara, quando “disparado” por outra checkbox

Question

Estou usando uma caixa de seleção para marcar todas as outras caixas de seleção em uma tabela.
Depois de uma caixa de seleção ser marcada DENTRO da tabela (na alteração), resumo todos os valores da caixa de texto no mesmo tr.

Funciona bem no Firefox e no Chrome.

No IE11 e anteriores (é importante para mim que funcione em TODOS os navegadores), a primeira alteração da caixa de seleção "todos" apenas marca as outras, mas não soma os valores da caixa de texto.
No segundo clique ele resume mas desmarca as caixas de seleção.
Então funciona de maneira errada porque a primeira "mudança" é ignorada ou algo assim.

Desculpe pelo meu mau inglês e má descrição.

<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 é o id do checkbox, marcando todos os outros.:)

// 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 essas informações sejam suficientes para você me ajudar um pouco.:)

Answer 1

Parece que alterar a propriedade "marcada" nem sempre aciona o evento "alteração".

Portanto, você deve mover seu cálculo de soma para uma função separada e chamá-la explicitamente no manipulador de cliques "#allcheck"

(também limpou um pouco seu código)

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

em vez de click uso de evento change evento para todos marque a caixa de seleção.on change será acionado após alterar para o novo valor e this.checked lhe dará o valor correto:

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