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