Question

我已经生成了以下输入：

<input type="text" id="rfq_ironilbundle_quotes_offer_price_0" name="rfq_ironilbundle_quotes[offer_price][0]" required="required" class="form-control offered-price">
<input type="text" id="rfq_ironilbundle_quotes_offer_price_1" name="rfq_ironilbundle_quotes[offer_price][1]" required="required" class="form-control offered-price">

这些输入可能超过两个。

当用户填写并追加div元素时，我需要计算输入中的所有价格。我怎么能这样做？

Answer 1

这是一个应该做你想要的例子。 http://jsfiddle.net/yvy986nc/

JS的片段。

  $('input.offered-price').keyup(function(){
      var val = 0;
      $('input.offered-price').each(function(){
         try{
              val += parseInt($(this).val(), 10) || 0;    
          }catch(e){
              // just to catch parse int failures
          } 
      });
      $('#result').html(val);  
  });

Answer 2

您可以声明一个默认值为零的隐藏字段，在添加控件时会增加，在删除控件时会减少

Answer 3

声明javascript变量以在用户填写或离开时汇总所有输入值，请查看示例。

http://jsfiddle.net/xb8gb8pm/2/

    var cart = {
    total: 0
};
$('.offered-price').blur(function () {
    cart.total = 0;
    $('.offered-price').each(function (i, idx) {
        price = $(idx).val().trim();
        cart.total += parseFloat(price !== '' ? price : 0);
    });
    $('.totalPrice').html('Total:'+cart.total);
});

Answer 4

访问所有输入

如果您的所有输入都有类别＆＃34;表格控制提供价格＆＃34;您可以像var inputs = document.querySelectorAll(".form-control.offered-price");

这样的HTML元素数组访问它们

附加HTML

要在元素后附加任何HTML，请使用element.insertAdjacentHTML("afterend",yourHTML);，其中yourHTML是包含有效HTML的字符串。您还可以使用var myChildElement = document.createElement("div")创建HTML元素，然后使用myParentElement.appendChild(myChildElement);

将该元素附加到父元素

所有输入值的总和

一种方法是将事件监听器附加到每个输入，以便每次输入更改时div都会重新计算总和，如下面的代码所示。

＆＃13;

var inputs = document.querySelectorAll(".form-control.offered-price");
inputs[inputs.length-1].insertAdjacentHTML("afterend","<div id='price_result'>");
(function(arr){
    for(var i = 0; i < arr.length; i++){
      if(arr[i].addEventListener){
        arr[i].addEventListener("keyup",function(){
          document.getElementById("price_result").innerHTML = sumValues(arr);
        });
      }else{
        arr[i].attachEvent("onkeyup",function(){
          document.getElementById("price_result").innerHTML = sumValues(arr);
        });
      }
    }
})(inputs);
function sumValues(arr){
  var sum = 0;
  for(var i = 0; i < arr.length; i++){
    sum += Number(arr[i].value,10);
  }
  return sum;
}

＆＃13;

<input type="text" id="rfq_ironilbundle_quotes_offer_price_0" name="rfq_ironilbundle_quotes[offer_price][0]" required="required" class="form-control offered-price">
<input type="text" id="rfq_ironilbundle_quotes_offer_price_1" name="rfq_ironilbundle_quotes[offer_price][1]" required="required" class="form-control offered-price">
<input type="text" id="rfq_ironilbundle_quotes_offer_price_2" name="rfq_ironilbundle_quotes[offer_price][2]" required="required" class="form-control offered-price">

＆＃13;

生成的Count使用jQuery输入整数值

4 个答案: