Question

我正在使用复选框来检查表格中的所有其他复选框在选中复选框后（在更改时）我将相同tr中的每个文本框值相加。

适用于Firefox和Chrome。

在IE11及以下版本（对我而言，它适用于每个浏览器），“全部”复选框的第一次更改只是勾选其他复选框，但不会总结文本框值。
在第二次点击时，他总结但取消勾选复选框所以它的工作方式是错误的，因为第一个“改变”被忽略了或者是......。

抱歉我的英文不好和描述不好。

<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是复选框的id，检查所有其他复选框。 :)

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

我希望这些信息足以让你帮助我一点。：）

Answer 1

所有复选复选框都是

而不是click事件使用change事件。在更改为新值后，更改将会触发，this.checked将为您提供正确的值：

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

Answer 2

似乎更改“已检查”属性并不总是触发“更改”事件。

因此，您必须将总和计算移动到单独的函数中，并在“#allcheck”中单击处理程序

显式调用它

（还清理了一下你的代码）

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

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

2 个答案: