jQuery：在购物车系统中计算价格、总额、运费和增值税答案

【问题标题】：jQuery: calculate price, total, shipping and vat in a cart systemjQuery：在购物车系统中计算价格、总额、运费和增值税
【发布时间】：2016-12-28 19:32:18
【问题描述】：

案例：

我正在尝试创建一个购物车系统，该系统将根据订购商品的数量计算价格，然后将与运费相加，最后计算加增值税价格的总和。

代码：

$(document).ready(function(){

        update_amounts();
        $('.qty').change(function() {
            update_amounts();
        });
    });

function update_amounts()
    {
        var sum = 0.0;
        $('#myTable > tbody  > tr').each(function() {
            var qty = $(this).find('option:selected').val();
            var price = $(this).find('.price').val();
            var amount = (qty*price)
            sum+=amount;
            $(this).find('.amount').text(''+amount);
        });
        //calculate the total to sum  
        $('.total').val(sum);
        //calculate total + shipping and add VAT
        var shipping = $(this).find('.shipping').val();
        var total = $(this).find('.total').val();
        var vat = $(this).find('.vat').val();
        //calculate vat
        var vat_amount = ((total, 10) * 100);
        //calculate grand total
        var total_shipping = (total+shipping);
        var ship_amount = (total_shipping+vat_amount);
        sum+=ship_amount;
        $('.grandTotal').val(sum);
    }

行为：

即使我已经使用了工作小提琴的第一部分，这也不起作用，看不到项目总价的数据变化，也无法计算总计。

预期行为：

当用户点击 Q.ty 时选择： - 总行数必须更新计算价格 * 数量 - 总行价格必须更新 - 行价总和必须添加到运费中 - 最后，根据总行总和计算的增值税必须返回总计。

小提琴：

这是一个完整的 html 部分改编（我正在使用 PHP 脚本来填充表格）https://jsfiddle.net/a1o2nmw8/1/

感谢所有可以合作的人。

【问题讨论】：

标签： javascript jquery sum percentage

【解决方案1】：

$(document).ready(function(){
		    update_amounts();
		    $('.qty').change(function() {
		        update_amounts();
		    });
		});

function update_amounts()
		{

				var sum = 0.0;
		    $('#myTable > tbody  > tr').each(function() {
       
		        var qty = $(this).find('option:selected').val();
		        var price = $(this).find('.price').text();
		        var amount = (qty*price)
		        sum+=amount;
		        $(this).find('.amount').text(''+amount);
		    });
		    //calculate the total to sum  
		    $('.total').val(sum);
		    //calculate total + shipping and add VAT
		    var shipping = $('.shipping').val();
		    var total = $('.total').val();
		    var vat = $('.vat').val();
		    //calculate vat
		     var vat_value = ((total*vat)/100);
		    //calculate grand total
		    
        sub_total = (parseFloat(total)+parseFloat(shipping)).toFixed(1);
        
		    var grand_total = (parseFloat(sub_total)+parseFloat(vat_value                    )).toFixed(1);
		  
		    $('.grandTotal').val(grand_total);
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-striped" id="myTable">
  	<thead>
  		<tr>
		  <th>ID</th>
		  <th>Name</th>
		  <th>Desc</th>
		  <th>Q.ty</th>
		  <th>Price</th>
		  <th>Total</th>
		</tr>
  	</thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>product</td>
        <td>description</td>
        <td><select class="qty" value="500">
        <option value="500">500</option>
        <option value="1000">1000</option>
        </select></td>
        <td><span class="price">50.0</span></td>
        <td><span class="total">0.0</span></td>
      </tr>
    </tbody>
  </table>
  <div class="row">
	  <div class="col-sm-3 col-sm-offset-9">
	  	<table class="table table-striped">
	  		<tr>
	  			<td>Total</td>
	  			<td><input type="text" class="total input" value="0.0" > €</td>
	  		</tr>
	  		<tr>
	  			<td>Shipping</td>
	  			<td><input type="text" class="shipping input" value="30.0" > €</td>
	  		</tr>
	  		<tr>
	  			<td>VAT</td>
	  			<td><input type="text" class="vat input" value="22" disabled> %</td>
	  		</tr>
	  		<tr>
	  			<td><strong>Grand Total</strong></td>
	  			<td><strong><input type="text" class="grandTotal input" value="0.0" disabled> €</strong></td>
	  		</tr>
	  	</table>
	  </div>

【讨论】：

谢谢，但这里似乎没有计算增值税。 52.0 从哪里来？
来自 html :- %
明白，这是因为我会看到即使我选择 1000 也不会改变
如果您觉得我的回答有用，请标记为正确
我认为这里的编码很好，但不能解决我的问题。我需要计算正确的IVA，所以如果我选择25000中的500必须成为IVA的5500，如果我选择1000必须是50000中的11000，对吧？

【解决方案2】：

在您发布的示例中，您没有使用任何库。试试这个，它会改变我。

更新：还添加了 .toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});为总计。

$(document).ready(function(){

        update_amounts();
        $('.qty').change(function() {
            update_amounts();
        });
    });

function update_amounts()
        {
        var sum = 0.0;
        $('#myTable > tbody  > tr').each(function() {
            var qty = $(this).find('option:selected').val();

            var price = $(this).find('.price').text();

            var amount = (qty*price)

            sum+=amount;

            $(this).find('.amount').html(''+amount);

        });
        //calculate the total to sum  
        $('.total').val(sum);
        //calculate total + shipping and add VAT
        var shipping = $('.shipping').val();
        var total = $('.total').val();
        var vat = $('.vat').val();
        //calculate vat
        var vat_amount = ((total*vat)/100);
        //calculate grand total
                var total_shipping  = (parseFloat(total)+parseFloat(shipping));

        var grand_total = (parseFloat(total_shipping)+parseFloat(vat_amount)).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});;

        $('.grandTotal').val(grand_total);
    }

https://jsfiddle.net/a1o2nmw8/10/

【讨论】：

增值税应更改为什么值？给我更多信息，我会检查它
必须将总和加上以百分比计算的增值税。就像发票一样（更多信息请看小提琴）
看来我修改的太晚了，肯定的也很好:)
也非常感谢您的帮助！

【解决方案3】：

你可以试试这个吗？？？

 $(document).ready(function(){

            update_amounts();
            $('.qty').change(function() {
                update_amounts();
            });
        });

function update_amounts()
        {
            var sum = 0.0;
            $('#myTable > tbody  > tr').each(function() {
                var qty = $(this).find('option:selected').val();

                var price = $(this).find('.price').html();

                var amount = (qty*price)

                sum+=amount;
            console.log("sum"+sum)
                $('.amount').html(''+amount);

            });
            //calculate the total to sum  
            $('.total').val(sum);
            //calculate total + shipping and add VAT
            var shipping = $('.shipping').val();

            var total = $('.total').val();

            var vat = $('.vat').val();

            //calculate vat
            var vat_amount = ((total, 10) * 100);

            //calculate grand total
            var total_shipping = (total+shipping);

            var ship_amount = (total_shipping+vat_amount);

            sum+=ship_amount;
            $('.grandTotal').val(sum);

        }

【讨论】：

【解决方案4】：

对于选择跨度值，你需要使用“text()”，然后替换

var price = $(this).find('.price').val();

作者：

var price = $(this).find('.price').text();

然后：

 var shipping = $(this).find('.shipping').val();
 var total = $(this).find('.total').val();
 var vat = $(this).find('.vat').val();

你不需要在这里使用 $(this)，只需删除并使用如下选择器：

 var shipping = $('.shipping').val();
 var total = $('.total').val();
 var vat = $('.vat').val();

最后，添加 parseFloat ：

 var ship_amount = parseFloat(total_shipping+vat_amount);

否则他只是连接成一个字符串。

Working example

【讨论】：

【解决方案5】：

您唯一需要做的就是将.val() 函数更改为.text()。

.val() 适用于组合框、文本框等。如果您想获取文本，请使用 .text()。

在进行数学运算之前将文本转换为数字。为此，您可以使用 parsefloat() 或 parseInt() 方法。

【讨论】：