如何在输入框中显示数量总数

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>