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

时间:2015-03-25 13:05:04

标签: javascript jquery html html5

我有这个小问题。我一直在检查网络以找到答案,但它主要用于未生成/添加的输入字段。

<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代码。如你所见,在&#34;中插入一个数字&#34;字段,总数应显示在范围内id =&#34;已添加&#34;。

<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>

2 个答案:

答案 0 :(得分:1)

刚刚注意到你更新了你确实想要一笔总和,这里有一个关于总计算模糊的小提琴,当你删除一行时,根据需要绑定其他事件(需要一些整理,但这应该让你开始):

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);
}

答案 1 :(得分:0)

请检查以下小提琴

https://jsfiddle.net/srsu4rne/

你应该只能计算div中的类

var multiField = $('.multiField').length
$('#added').html(multiField);