使用jQuery自动计算总值

时间:2016-06-24 09:43:28

标签: javascript jquery html

我想计算用户自动输入的数字的总和。当用户删除一个数字时,总和应该自动计算。如何使用jquery计算数组值的总和。请帮我解决这个问题。

$(document).ready(function(){
    $('.form-control').change(function(){
        var total = 0;
        $('.form-control').each(function(){
            if($(this).val() != '')
            {
                totalvalue += parseInt($(this).val());
            }
        });
        $('#totalvalue').html(totalvalue);
    });
})(jQuery);
<h2 style="text-align:center;">INVOICE</h2>        

        <form id='students' method='post' name='students' action='index.php'>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tr>
                            <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
                            <th>S. No</th>
                            <th>Job ID</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total Price</th>
                        </tr>
                        <tr>
                            <td><input type='checkbox' class='case'/></td>
                            <td><span id='snum'>1.</span></td>
                            <td><input class="form-control" type='text' id='txt_jobid' name='txt_jobid[]'/></td>
                            <td><input class="form-control" type='text' id='txt_quantity' name='txt_quantity[]'/></td>
                            <td><input class="form-control" type='text' id='txt_price' name='txt_price[]'/></td>
                            <td><input class="form-control" type='text' id='txt_totalprice' name='txt_totalprice[]'/> </td>
                        </tr>
                    </table>
                    <button type="button" class='btn btn-danger delete'>- Delete</button>
                    <button type="button" class='btn btn-success addmore'>+ Add More</button>
                </div>
            </form>     Total: <div id="totalvalue">0</div>        
提交表格
        </form>

1 个答案:

答案 0 :(得分:0)

有时您使用total,有时使用totalValue。将变量命名为相同。并删除最后的(jQuery)。那里错了。

$(function() {
    $('.form-control').change(function() {
        var total = 0;

        $('.form-control').each(function() {
            if( $(this).val() != '' )
                total += parseInt($(this).val());
        });

        $('#totalvalue').html(total);
    });

    // trigger initial calculation if wanted
    .change();
});

示例:https://jsfiddle.net/0zpkow5L/
初步计算:https://jsfiddle.net/0zpkow5L/1/

代码的完整工作示例:https://jsfiddle.net/0zpkow5L/8/