如何使用 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>

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

How do I calculate subtotals and total using jQuery?

javascript

jquery

calculation