如何使用jQuery计算小计和总计？

Question

我有此表格，需要计算2个小计中的项目，并将这些小计求和成一个总数。

我只能得到subTotal1和subTotal2的总和，但是总计算失败了，因为它没有线索来计算平均值（不是公式，而是JavaScript代码）。

这是我的代码：

 $(document).on("change", ".qty1", function() { var sum = 0; $(".qty1").each(function() { sum += +$(this).val(); }); $(".subTotal1").val(sum); }); $(document).on("change", ".qty2", function() { var sum = 0; $(".qty2").each(function() { sum += +$(this).val(); }); $(".subTotal2").val(sum); }); // Doesn't work $(document).on("change", ".subTotal", function() { var sum = 0; $(".subTotal").each(function() { sum += +$(this).val(); }); $(".total").val(sum / 2); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="./"> Shoes 1: <input type="number" name="shoes1" class="qty1"><br> Shoes 2: <input type="number" name="shoes2" class="qty1"><br> Shoes 3: <input type="number" name="shoes3" class="qty1"><br> Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br><br> Sandals 1: <input type="number" name="sandals1" class="qty2"><br> Sandals 2: <input type="number" name="sandals2" class="qty2"><br> Sandals 3: <input type="number" name="sandals3" class="qty2"><br> Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br><br> Total: <input type="number" name="total" class="total"><br><br> Mean (50% Shoes + 50% Sandals ) / 2: <input type="number" name="mean" class="mean"><br> <input type="submit" value="Submit"> </form> 

Answer 1

该文档不会检测仅由javascript用户完成的更改，否则您将经历一些无限循环。 所以在计算完小计后才调用函数

  $(document).on("change", ".qty1", function() { var sum = 0; $(".qty1").each(function(){ sum += +$(this).val(); }); $(".subTotal1").val(sum); calcTotal(); }); $(document).on("change", ".qty2", function() { var sum = 0; $(".qty2").each(function(){ sum += +$(this).val(); }); $(".subTotal2").val(sum); calcTotal(); }); // Does work function calcTotal() { var sum = 0; $(".subTotal").each(function(){ sum += +$(this).val(); }); $(".total").val(sum); $(".mean").val(sum/2); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="./"> Shoes 1: <input type="number" name="shoes1" class="qty1"><br> Shoes 2: <input type="number" name="shoes2" class="qty1"><br> Shoes 3: <input type="number" name="shoes3" class="qty1"><br> Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br> <br> Sandals 1: <input type="number" name="sandals1" class="qty2"><br> Sandals 2: <input type="number" name="sandals2" class="qty2"><br> Sandals 3: <input type="number" name="sandals3" class="qty2"><br> Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br> <br> Total: <input type="number" name="total" class="total"><br> <br> Mean (50% Shoes + 50% Sandals ) / 2: <input type="number" name="mean" class="mean"> <br> <input type="submit" value="Submit"> </form>