Question

我有几个文本框应该有数字值。在每个文本框的模糊事件上，该特定文本框的值将添加并显示在另一个文本框中。因此，如果某人在第一个文本框中输入10，则最后一个文本框应显示10，如果在下一个文本框中输入20，则该值应添加并在最后一个文本框中显示30。

<input type="text" class="sum" /> 
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />

<input type="text" id="total" />

使用jquery我执行以下操作，

$('.sum').blur(function(){
 $('#total').val(parseFloat($(this).val())+parseFloat($('#total').val()));
});

可以看出存在一个问题，如果任何文本框因任何原因再次聚焦，则再次对Grand Total进行相同的值。如何确保文本框中的值一旦添加到总数中就不会再次添加。

Answer 1

每次模糊事件触发时都可以找到新的总和

$('.sum').blur(function() {
  var sum = 0;
  $('.sum').each(function(){
     var val = $(this).val();
    if(!isNaN(val) && val != "") {
      sum+=parseFloat(val); 
    }
  });
  $('#total').val(sum);
});

由于您的输入类型不是数字，并且可以接受任何字母数字字符串和特殊字符，因此存在数字检查。

$('.sum').blur(function() {
  var sum = 0;
  $('.sum').each(function() {
    var val = $(this).val();
    if (!isNaN(val) && val != "") {
      sum += parseFloat(val);
    }
  });
  $('#total').val(sum);
});

<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />

<input type="text" id="total" value="0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

不是每次都添加新的，只要sum每次都改变它们的所有内容：

＆＃13;

$('.sum').blur(function() {
  var new_sum = 0;
  $('.sum').each(function(i, el) {
    if ($(el).val()) {
      new_sum += parseFloat($(el).val());
    }
  });
  $('#total').val(new_sum);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="sum" /> 
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />
<input type="text" class="sum" />

<input type="text" id="total" />

＆＃13;

添加文本框值后阻止添加

2 个答案: