Question

我正在尝试使用jquery添加一组文本框。每个文本框都有一个类（class1），使用bootstrap对其进行样式设置。我正在添加一个额外的类（class2）来运行jquery函数。以下是两个文本框的外观示例。

<input type="text" class="class1 class2" name="textbox1" id="textbox1 />
<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

这是我的jquery函数。 GrandTotal是保存总和的文本框的id。

$('.class2').keyup(function () { 
  var sum = 0;

  $('.class2').each(function() {
    sum += Number($(this).val());
  });

  $('#GrandTotal').val(sum);

});

它不起作用。我没有得到#GrandTotal的结果。有人能告诉我我做错了什么吗？在此先感谢您的帮助。

cdr6800

Answer 1

您必须验证输入是否为数字，否则您将获得NaN（不是数字）。 JavaScript具有isNaN()函数，用于检查给定输入是否为NaN。

$('input.class2').keyup(function() {
  var sum = 0;

  $('input.class2').each(function() {
    var value = Number($(this).val());
    if(!isNaN(value)) {
        sum += value;
    }
  });

  $('#GrandTotal').val(sum);
});

查看实际操作：https://jsfiddle.net/ibrahimeymenduran/ymnu9hf4/

Answer 2

您的HTML无效。

<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

► type =“text”而不是“test”

►您没有使用双引号关闭ID。

$(document).ready(function() {

  $('.class2').keyup(function() {
    var sum = 0;

    $('.class2').each(function() {
      sum += Number($(this).val());
    });

    $('#GrandTotal').val(sum);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="class1 class2" name="textbox1" id="textbox1">
<input type=" text " class="class1 class2 " name="textbox2 " id="textbox2">
<input type=" text " name="textbox3 " id="GrandTotal">

Answer 3

即使没有jQuery，你也可以用简单的JavaScript来实现。

＆＃13;

var GrandTotal = document.getElementById("GrandTotal");
var values = [0, 0];

function updateTotal(element, index) {
  element.onkeyup = function() {
    if (!isNaN(element.value)) {
      values[index] = parseInt(element.value || 0);
    }
    GrandTotal.textContent = values[0] + values[1];
  }
}

Array.prototype.forEach.call(document.getElementsByClassName('class2'), updateTotal);

＆＃13;

<input type="text" class="class1 class2" name="textbox1" id="textbox1" />
<input type="test" class="class1 class2" name="textbox2" id="textbox2" />
<p id="GrandTotal"></p>

＆＃13;

Array.from(document.getElementsByClassName('class2')).forEach(updateTotal);为您提供了一个包含类class2的元素数组。 forEach为每个人调用updateTotal。
updateTotal需要element，这是已更改的元素，index表示它是<input/>的第一个还是第二个。
在element.onkeyup内，我们检查给定的<input/>是否包含非NaN值。如果是这样，我们将数值（或0）放在values数组中的适当位置。然后，我们会更新#GrandTotal的文字。

这样，#GrandTotal的值将始终随每<input/>个更改而更新，除非它会更改为无效值，在这种情况下，它将保留最后一个有效值

jquery函数用于对具有2个类的文本框求和

3 个答案: