Casella di controllo .Change () Evento non spara, quando "licenziato" da un'altra casella di controllo

Question

Sto usando una casella di controllo per controllare tutte le altre caselle di controllo in una tabella.
Dopo una casella di controllo che viene controllata all'interno del tavolo (sul cambiamento) riassumeremo ogni valore di testo nella stessa TR.


Funziona bene su Firefox e Chrome.

Su IE11 e sotto (è importante per me che funziona in ogni browser) il primo cambiamento della casella di controllo "Tutto" spunta solo gli altri, ma non riassume i valori della casella di testo.
Sul secondo clic si riassume ma ha perticino le caselle di controllo.
Quindi funziona nel modo sbagliato perché il primo "cambiamento" è ignorato o sth.

Scusa per la mia cattiva inglese e la mia descrizione cattiva.

<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 è l'ID della casella di controllo, controllando tutti gli altri.:)

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

.

Spero che queste informazioni siano sufficienti per te per aiutarmi un po '.:)

Answer 1

Sembra che la modifica della proprietà "controllata" non abbia sempre attivato l'evento "cambia".

Quindi è necessario spostare il calcolo della somma in funzione separata e chiamarlo esplicitamente in "#allCheck" click handler

(ha anche ripulito il tuo codice un po ')

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

Invece di evento click Utilizzare l'evento change per tutti Controllare CheCbox.Sul cambiamento si spegnerà dopo aver modificato il nuovo valore e this.checked ti darà il valore corretto:

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

.