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

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

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

它不起作用了。我在总决赛中没有得到任何结果。有人能告诉我我做错了什么吗？提前感谢你的帮助

---

cdr6800

您必须验证输入是否为数字，否则您将得到的不是数字。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);
});

---

查看它的实际操作：

您必须验证输入是否为数字，否则您将得到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);
});

---

查看它的操作：

您的HTML无效

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

---

您的HTML无效

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

---

即使不使用jQuery，也可以使用纯JavaScript实现

var GrandTotal=document.getElementByIdGrandTotal； var值=[0,0]； 函数updateTotalelement，索引{ element.onkeyup=函数{ if！isNaNelement.value{ 值[索引]=ParseInteElement.value | | 0； } GrandTotal.textContent=值[0]+值[1]； } } Array.prototype.forEach.calldocument.getElementsByClassName'class2'，updateTotal；

---

即使不使用jQuery，也可以用纯JavaScript实现

var GrandTotal=document.getElementByIdGrandTotal； var值=[0,0]； 函数updateTotalelement，索引{ element.onkeyup=函数{ if！isNaNelement.value{ 值[索引]=ParseInteElement.value | | 0； } GrandTotal.textContent=值[0]+值[1]； } } Array.prototype.forEach.calldocument.getElementsByClassName'class2'，updateTotal；

---

这应该行得通！GrandTotal在哪里？GrandTotal是保存总和的文本框的id。它在html代码中。当我更新textbox1或2时，GrandTotal确实会改变，但每次我点击tab键并不断添加时，GrandTotal都会改变。也许keyup不是正确的函数类型？谢谢。如果你想看看我在说什么，你可以转到并在第一个数量文本框中输入1$当你从该框中签出标签时，50将下降到GrandTotal，但是当你通过其他标签时，它会不断地向GrandTotal添加50美元。这应该会起作用！GrandTotal在哪里？GrandTotal是保存总和的文本框的id。它在html代码中。当我更新textbox1或2时，GrandTotal确实会改变，但每次我点击tab键并不断添加时，GrandTotal都会改变。也许keyup不是正确的函数类型？谢谢。如果你想看看我在说什么，你可以转到并在第一个数量文本框中输入1$当你从这个框中签出标签时，50将下降到总金额，但是当你通过其他标签时，它会不断地向总金额增加50美元。这并不重要。如果输入元素的类型未提供或无效，则该类型将被视为文本。是的……我看到了，但这只是一个示例。我在真实案例中使用了文本。我只是打错了字。谢谢你的发现。@RajaprabhuAravindasamy我只是向OP指出了错误，以便他能够改进谢谢你，里诺。它通常是有效的…但是有可能同时进行GrandTotal更新textbox1或2更新吗？现在，为了让GrandTotal更新，您必须对其进行制表。如果你想了解我的意思，请访问www.pfacmeeting.org/badgeform2.php，在数量栏中输入数字。但在您的示例中，它看起来是这样工作的。不知道为什么在我的页面上它不这样工作。以下是jquery代码：谢谢。$document.readyfunction{$'.class2'.keyupfunction{var sum=0；$'.class2'.eachfunction{sum+=Number$this.val；}；$'GrandTotal'.valsum.toFixed2；}；那没关系。如果输入元素的类型未提供或无效，则该类型将被视为文本。是的……我看到了，但这只是一个示例。我在真实案例中使用了文本。我只是打错了字。谢谢你的发现。@RajaprabhuAravindasamy我只是向OP指出了错误，以便他能够改进谢谢你，里诺。它通常是有效的…但是有可能同时进行GrandTotal更新textbox1或2更新吗？现在，为了让GrandTotal更新，您必须对其进行制表。如果你想了解我的意思，请访问www.pfacmeeting.org/badgeform2.php，在数量栏中输入数字。但在您的示例中，它看起来是这样工作的。不知道为什么在我的页面上它不这样工作。以下是jquery代码：谢谢。$document.readyfunction{$'.class2'.keyupfunction{var sum=0；$'.class2'.eachfunction{sum+=Number$this.val；}；$'GrandTotal'.valsum.toFixed2；}；