javascript - 当从 javascript jQuery 单击按钮时，如何自动更改表单中的值？

Question

我有一个 4 行的表单:A , B , C ，和Total 。

C是可选，所以我可以显示/隐藏它。

Total是 A 的总和直到C 。

假设我输入了 A : 3、B : 4 和 C : 7。所以总共会显示 14。

当我点击“关闭C”时，它应该只求和A和B值，即 7，C即使我已经将 C 值设置为 0，也不包括在内。但它没有发生。总值(value)仍然是 14。

这是我到目前为止的代码

    $(document).ready(function(){
		$("#btn_add_c").click(function()
		{
			$("#form_c").show();
			$("#add_value_c").hide();
		});
		
		$("#cancel_c_value").click(function()
		{
			$("#btn_add_c").show();
			$("#form_c").hide();
			//reset the value_c to 0
			$("#value_c").val(0);
		});
		
		$("#value_a, #value_b, #value_c").on("change", function()
		{
			var value_a = Math.abs($("#value_a").val());
			var value_b = Math.abs($("#value_b").val());
			var value_c = Math.abs($("#value_c").val());
			
			var total = value_a + value_b + value_c;
			
			$("#total").val(total);
		});
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<button type='button' id="btn_add_c">Add C</button>
</div>

<form action ="" method="post">
	<div>
  	<label>Input A</label>
	  <div>
	    <input type="text" class="number" id="value_a">
	  </div>
	</div>
	
	<div>
	  <label>Input B</label>
	  <div>
	   <input type="text" class="number" id="value_b">
	  </div>
	</div>
	
	<div id="form_c" style="display:none">
	  <label>Input C</label>
	  <div>
	    <input type="text" class="number" id="value_c">
	  </div>
	  <i id="cancel_c_value">Close C</id>
	</div>
	
	<div>
	  <label>Total</label>
	  <div>
	   <input type="text" class="number" id="total" readonly>
	   </div>
	</div>
 </form>

任何人都可以帮助我如何在单击关闭按钮时自动更改总计值。

fiddle :https://jsfiddle.net/b3nrdyem/4/

Answer 1

通过 Javascript 更改值不会导致 change 事件，但您可以使用 $('#value_a').trigger('change');< 自行触发事件:

$(document).ready(function() {
  $("#btn_add_c").click(function() {
    $("#form_c").show();
    $("#add_value_c").hide();
  });

  $("#cancel_c_value").click(function() {
    $("#btn_add_c").show();
    $("#form_c").hide();
    //reset the value_c to 0
    $("#value_c").val(0);
    $('#value_a').trigger('change');
  });

  $("#value_a, #value_b, #value_c").on("change", function() {
    var value_a = Math.abs($("#value_a").val());
    var value_b = Math.abs($("#value_b").val());
    var value_c = Math.abs($("#value_c").val());

    var total = value_a + value_b + value_c;

    $("#total").val(total);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<button type='button' id="btn_add_c">Add C</button>
</div>

<form action ="" method="post">
	<div>
	<label>Input A</label>
	<div>
	<input type="text" class="number" id="value_a">
	</div>
	</div>
	
	<div>
	<label>Input B</label>
	<div>
	<input type="text" class="number" id="value_b">
	</div>
	</div>
	
	<div id="form_c" style="display:none">
	<label>Input C</label>
	<div>
	<input type="text" class="number" id="value_c">
	</div>
	<i id="cancel_c_value">Close C</id>
	</div>
	
	<div>
	<label>Total</label>
	<div>
	<input type="text" class="number" id="total" readonly>
	</div>
	</div>
</form>