如何在輸入框中顯示數量總數

Question

我有一個數量字段。 用戶可以單擊“添加”按鈕添加多個數量字段。

我的問題是，我必須在輸入框中顯示數量的總數。 例如，我在數量框中添加了10個數量，在總計框中添加了10個數量。

用戶可以單擊加號和減號按鈕來增加和減少數量，也可以直接在數量框中輸入數量，然后總計將顯示在總計框中。

用戶可以添加與刪除相同的多個數量字段。 我單擊以刪除應從“總數”字段中刪除的數量。

您也可以在這里檢查我的代碼https://jsfiddle.net/pu6qy4zr/70/

 function increaseValue(n) { var value = parseInt(document.getElementById('number' + n).value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number' + n).value = value; } function decreaseValue(n) { var value = parseInt(document.getElementById('number' + n).value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('number' + n).value = value; } $(document).ready(function() { var max_fields = 20; //maximum input boxes allowed var wrapper = $(".add_row"); //Fields wrapper var add_button = $(".add_row_click"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $("input[id^=medication_name]").focus(); $(wrapper).append('<div class="custom_fields"><div class="col-md-6"><div class="row"><div class="col-md-6"><div class="form_group"><div class="plus_minus"><span class="value_button decrease" onclick="decreaseValue(' + x + ')" value="Decrease Value"> - </span><input type="number" id="number' + x + '" class="qty_number form_control" name="qty_number[]" class="form_control" value="0" /><span class="value_button increase" onclick="increaseValue(' + x + ')" value="Increase Value"> + </span></div></div></div><div class="col-md-6"><div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove </div></div></div></div></div></div></div>'); } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).closest('.custom_fields').remove(); x--; }) }); 

 <div class="add_row"> <div class="plus_minus"> <span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span> <input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" /> <span class="value_button increase" onclick="increaseValue(1)" value="Increase Value">+</span> </div> <div class="btn_row add_row_click"> <span> + </span> Add </div> </div> <input type="text" class="form_control" name="total_qty" id="total_qty" value="" placeholder="Total number of quantity" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

您可以簡化所有這一切。

• 對每個更改運行sum() ，包括刪除和直接輸入/粘貼。
• 加號/減號只有一個事件處理程序
• 刪除內聯處理程序

PS：我發現了一個錯誤： value < 1 ? value = 1 : ''; value < 1 ? value = 1 : ''; 將強制值為1
PPS：我建議您將.clone用於div而不是插入它。 使更新HTML更容易。 由於我委托並使用相對尋址，因此您無需更改字段的ID

 function sum() { var total = 0; $(".qty_number").each(function() { // or use .map.get() total += this.value?parseInt(this.value):0; }) $("#total_qty").val(total); } $(document).ready(function() { var max_fields = 20; //maximum input boxes allowed var $wrapper = $(".add_row"); //Fields wrapper var add_button = $(".add_row_click"); //Add button ID var x = 1; //initlal text box count $(add_button).on("click",function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $("input[id^=medication_name]").focus(); $wrapper.append('<div class="custom_fields"><div class="col-md-6"><div class="row"><div class="col-md-6"><div class="form_group"><div class="plus_minus"><span class="value_button decrease" value="Decrease Value"> - </span><input type="number" id="number' + x + '" class="qty_number form_control" name="qty_number[]" class="form_control" value="0" /><span class="value_button increase" value="Increase Value"> + </span></div></div></div><div class="col-md-6"><div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove </div></div></div></div></div></div></div>'); } }); $wrapper.on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).closest('.custom_fields').remove(); x--; sum(); // remove also updates the total }) $wrapper.on("click",".value_button",function() { var $input = $(this).closest(".plus_minus").find(".qty_number"); var value = parseInt($input.val(), 10); value = isNaN(value) ? 0 : value; value+=$(this).is(".decrease")?-1:1; // decrease on increase dependent on class if (value < 0) value=0; $input.val(value); sum(); // sum each time }); $wrapper.on("input",".qty_number",sum); // any input or paste }); 

 <div class="add_row"> <div class="plus_minus"> <span class="value_button decrease" value="Decrease Value">-</span> <input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" /> <span class="value_button increase" value="Increase Value">+</span> </div> <div class="btn_row add_row_click"> <span> + </span> Add </div> </div> <input type="text" class="form_control" name="total_qty" id="total_qty" value="" placeholder="Total number of quantity" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>