在添加的输入字段中计算TOTAL

Calculating TOTAL in added input fields

本文关键字：计算 TOTAL 字段 输入 添加      更新时间：2023-09-26

我有这个小问题。我一直在网上寻找答案，但主要是针对未生成/添加的输入字段。

<script>
$(document).ready(function(){

/* --- ADD FIELD --- */
    $('.TotalMultiField').each(function() {
    var $wrapper = $('.multiFields', this);
    $(".addField", $(this)).click(function(e) {
        $('.multiField:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
/* --- REMOVE FIELD --- */
    $('.multiField .removeField', $wrapper).click(function() {
        if ($('.multiField', $wrapper).length > 1)
            $(this).parent('.multiField').remove();
    });
});
</script>

上面是用于添加和删除字段的Jquery脚本。下面是HTML代码。如您所见，在"插入数字"字段中，总数应显示在span id="added"中。

<form role="form" action=""" method="">
    <div class="TotalMultiField">
      <div class="multiFields">
        <div class="multiField">
          <input type="date">
<input type="number" class="number" placeholder="Insert a number">
          <button type="button" class="removeField">Remove</button>
        </div>
      </div>
    <button type="button" class="addField">Add field</button>
  </div>
  Total:<span id="added"></span>
</form>

刚刚注意到你更新了，你确实想要一个总和，这是对模糊计算的总和的篡改，当你删除一行时，根据需要绑定其他事件（需要一些整理，但这应该让你开始）：

http://jsfiddle.net/1ggaco1d/4/

以下代码进行合计：

function total() {
    var total = 0;
    $(".number").each(function (idx, el) {
        var value = $(el).val();
        if (value !== "") {
            total = total + parseFloat($(el).val());
        }
    });
    $("#added").text(total);
}

请检查下面的fiddle

https://jsfiddle.net/srsu4rne/

您应该能够只计算div 中的类

var multiField = $('.multiField').length
$('#added').html(multiField);
相关文章：