如何使用jquery添加或删除值？

Question

<div class="container">
	<div class="form-group">
		<form>  
			<button>click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
			<button>click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
			<button>click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
			<button>click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
			<label>total values</label>
			<input type="text" name="total_ammount" value="50" readonly>
		</form>  
	</div>
</div>

如果我单击按钮添加第一个输入值10，那么如果再次单击相同的按钮，它将与我的总输入字段值相加，从而减去这些值。 其余字段也应做同样的工作。 使用jquery怎么可能，请解释一下。

Answer 1

请尝试以下代码。

function addValue(dhis){
  var val=parseFloat(dhis.children().val()) // get the text box value
  var total_ammount=parseFloat($('#total_ammount').val())+val
  $('#total_ammount').val(total_ammount);
  dhis.attr('onclick','subValue($(this))') // change the onclick function
}
function subValue(dhis){
  var val=parseFloat(dhis.children().val()) // get the text box value
  var total_ammount=parseFloat($('#total_ammount').val())-val
  $('#total_ammount').val(total_ammount);
  dhis.attr('onclick','addValue($(this))') // change the onclick function
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="form-group">
		<form>  
			<button type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfirst" value="10" readonly></button><br>
			<button  type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addsecond" value="10" readonly></button><br>
			<button  type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addthird" value="10" readonly></button><br>
			<button  type="button" onclick="addValue($(this))">click to add/remove<input type="text" name="addfourth" value="10" readonly></button><br>
			<label>total values</label>
			<input type="text" name="total_ammount"  id="total_ammount" value="50" readonly>
		</form>  
	</div>
</div>