javascript - 使用 Javascript 获取每种模式的总金额

Question

 <?php
    $ctr = 0;
    while($ctr <= 10){
    ?>
    <td><input required type='text' name='amount[<?echo $ctr; ?>]' class='amount'></td>
    <td><input required type='text' name='mode[<?echo $ctr; ?>]' value='Cash'></td>
    <?php
    $ctr++;
    }
    ?>
    Total Amount: <span class="total_amount">0.00</span>
    Total Cash : <span class="total_cash">0.00</span>
    Total Check: <span class="total_check">0.00</span>

$(document).on('blur','.amount',function () {
    var total = 0;
    var total_cash = 0;
    var total_check = 0;

    $('.amount').each(function () {
        total += parseFloat($(this).val());
    });

    $('.total_amount').html(total);
});

使用上面的代码，我可以获得我在输入金额字段中编码的数字的总数。我怎样才能获得每种模式、现金(默认)和支票(用户可以更改模式来检查)的总额？

Answer 1

如果您确定下一个输入宽度 mode 始终对应，则可以使用 JQuery.next。所以需要检查每个参数的值是否为NaN。

$(document).on('blur','.amount',function () {
    var total = 0;
    var total_cash = 0;
    var total_check = 0;
    var val, mode;
    $('.amount').each(function () {
        val = parseFloat($(this).val());
        val = val ? val : 0;
        total += val;
        mode = $(this).next().val();
        switch(mode) {
            case "Check" : total_check += val; break;
            case "Cash"  : total_cash  += val; break;                
        } 
    });

    $('.total_amount').html(total);
    $('.total_cash').html(total_cash);
    $('.total_check').html(total_check);    
});

http://jsfiddle.net/ag0a78jd/