如果动态输入,如何获得javascript中所有输入值的总和

如果动态输入,如何获得javascript中所有输入值的总和,javascript,jquery,html,forms,input,Javascript,Jquery,Html,Forms,Input,我希望获得所有产品输入字段值的总和,这些值是用户单击加号或减号按钮时动态生成的,为此,将每个产品的总价格相加 非常感谢您的帮助。这就是我到目前为止所做的: JS $(函数(){ $('.service_product-item')。每个(函数(){ var thisEl=$(此), btnPlus=thisEl.find('.service_btn-plus'), btnMinus=thisEl.find('.service_btn-minus'), fieldQtt=thisEl.find('

我希望获得所有产品输入字段值的总和,这些值是用户单击加号或减号按钮时动态生成的,为此,将每个产品的总价格相加

非常感谢您的帮助。这就是我到目前为止所做的:

JS

$(函数(){
$('.service_product-item')。每个(函数(){
var thisEl=$(此),
btnPlus=thisEl.find('.service_btn-plus'),
btnMinus=thisEl.find('.service_btn-minus'),
fieldQtt=thisEl.find('input[name=“service-qt1”]、input[name=“service-qt2”]),
ItemPricel=thisEl.find('.service_item-price'),
价格=项目价格数据(“价格”);
//添加产品和产品价格
btnPlus.on('click',function(){
qttValue=parseInt(fieldQtt.val());
字段QTT.val(QTT值+1);
html(“$”+(qttValue+1)*价格);
});
//减去产品和产品价格
btnMinus.on('click',function()){
qttValue=parseInt(fieldQtt.val())-1;

var newQTT=(qttValue更新了小提琴。对它做了一些更改 请看一下,如果这是你想要的,请告诉我


问题陈述中存在一些问题。主要问题是您没有为应用程序定义任何模型,html也充当数据模型,重要数据的作用域是事件处理程序。此外,还不清楚该应用程序的初始状态。因此,我只是稍微修改了您的代码

下面是一个简单的方法,用于说明如何做到这一点:

  • 有一个全球总数
  • 使用每个减号和加号,相应地更新值

var总计=0;
$(函数(){
$('.service_product-item')。每个(函数(){
var thisEl=$(此),
btnPlus=thisEl.find('.service_btn-plus'),
btnMinus=thisEl.find('.service_btn-minus'),
fieldQtt=thisEl.find('input[name=“service-qt1”]、input[name=“service-qt2”]),
ItemPricel=thisEl.find('.service_item-price'),
价格=项目价格数据(“价格”);
//添加产品和产品价格
btnPlus.on('click',function(){
qttValue=parseInt(fieldQtt.val());
字段QTT.val(QTT值+1);
总计=总计+价格;
html(“$”+(qttValue+1)*价格);
$('#idGT').html(总计);
});
//减去产品和产品价格
btnMinus.on('click',function()){
qttValue=parseInt(fieldQtt.val())-1;
如果(QTV值>=0){
总价=总价;
}

var newQTT=(QTV值G_S,尽管这同样有效,但我还是同意Vladimir的答案,因为他的答案更像是一种全局方法,如果我添加更多产品,我就不需要为每个输入名称添加var。不过,感谢您向我展示了另一种方法!非常感谢!是的。这正是您目前拥有的。我没有做太多更改就连我也觉得弗拉基米尔的做法更像是一种全球性的做法。
$(function() {
  $('.service_product-item').each(function() {
    var thisEl = $(this),
      btnPlus = thisEl.find('.service_btn-plus'),
      btnMinus = thisEl.find('.service_btn-minus'),
      fieldQtt = thisEl.find('input[name="service-qt1"],input[name="service-qt2"]'),
      itemPriceEl = thisEl.find('.service_item-price'),
      price = itemPriceEl.data('price');
    // Add Products & Products Price
    btnPlus.on('click', function() {
      qttValue = parseInt(fieldQtt.val());
      fieldQtt.val(qttValue + 1);
      itemPriceEl.html('$' + (qttValue + 1) * price);
    });
    // Subtract Products & Products Price
    btnMinus.on('click', function() {
      qttValue = parseInt(fieldQtt.val()) - 1;
      var newQTT = (qttValue <= 0) ? 0 : qttValue;
      fieldQtt.val(newQTT);
      itemPriceEl.html('$' + newQTT * price);
    });
  });
});
<div class="service_products_and_services_wrapper">
  <div class="service_product-items">
    <div class="service_product-item">
      <div class="service_item-wrap">
        <img src="http://www.kinyu-z.net/data/wallpapers/27/796765.png" alt="QT1" title="" />
        <div class="service_wrap-qtt">
          <div class="service_wrap-qtt-field-qtt">
            <input class="service_field-qtt" name="service-qt1" value="0" readonly="" />
          </div>
          <div class="service_wrap-qtt-minus-plus">
            <div class="service_btn-cart-qtt service_btn-plus">+</div>
            <div class="service_btn-cart-qtt service_btn-minus">-</div>
          </div>
        </div>
      </div>
      <div class="service_item-info">
        <div class="service_item-title">QT1<br>
          <span style="font-size: .7em; text-transform: none;">($5 per item)</span>
        </div>
        <div class="service_item-price" data-price="5">$0</div>
      </div>
    </div>
    <div class="service_product-item">
      <div class="service_item-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIuVn6ZXHwQiFC0IlB1N_CxbXo6-5x1A4yqspYsxUUb0Xjmu8L" alt="QT2" title="" />
        <div class="service_wrap-qtt">
          <div class="service_wrap-qtt-field-qtt">
            <input class="service_field-qtt" name="service-qt2" value="0" readonly="" />
          </div>
          <div class="service_wrap-qtt-minus-plus">
            <div class="service_btn-cart-qtt service_btn-plus">+</div>
            <div class="service_btn-cart-qtt service_btn-minus">-</div>
          </div>
        </div>
      </div>
      <div class="service_item-info">
        <div class="service_item-title">QT2<br>
          <span style="font-size: .7em; text-transform: none;">($10 per item)</span>
        </div>
        <div class="service_item-price" data-price="10">$0</div>
      </div>
    </div>
  </div>
  <p style="margin-top: 40px;">Grand Total: $0</p>
</div>
      var firstTotal =  $('input[name="service-qt2"]').val() * 10 ; 
      var secondTotal = $('input[name="service-qt1"]').val() * 5;
      $('#grandTotal').html(firstTotal + secondTotal)
var total = 0;
$(function() {
  $('.service_product-item').each(function() {
    var thisEl = $(this),
      btnPlus = thisEl.find('.service_btn-plus'),
      btnMinus = thisEl.find('.service_btn-minus'),
      fieldQtt = thisEl.find('input[name="service-qt1"],input[name="service-qt2"]'),
      itemPriceEl = thisEl.find('.service_item-price'),
      price = itemPriceEl.data('price');
    // Add Products & Products Price
    btnPlus.on('click', function() {
      qttValue = parseInt(fieldQtt.val());
      fieldQtt.val(qttValue + 1);
      total = total + price;
      itemPriceEl.html('$' + (qttValue + 1) * price);
      $('#idGT').html(total);
    });
    // Subtract Products & Products Price
    btnMinus.on('click', function() {
      qttValue = parseInt(fieldQtt.val()) - 1;
      if(qttValue >= 0){
         total = total - price;
      }
      var newQTT = (qttValue <= 0) ? 0 : qttValue;
      fieldQtt.val(newQTT);
      itemPriceEl.html('$' + newQTT * price);
      $('#idGT').html(total);
    });
  });
});
<p style="margin-top: 40px;">Grand Total: $<span id="idGT">0</span></p>