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

Question

我有这个表单，我需要计算2个子总计中的项目，并将这些子总数合计为一个总数。

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

这是我的代码：

＆＃13;

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>