使用 jQuery 对几个文本输入中的值求和答案

【问题标题】：Using jQuery to sum values from a couple text inputs使用 jQuery 对几个文本输入中的值求和
【发布时间】：2011-12-17 18:44:15
【问题描述】：

我有几个文本输入，我想计算另一个输入中的值的总和。这必须即时发生，只要用户在其中一个输入中输入值。我打算为此使用 jQuery，并且我想为每个输入添加一个类名，例如 class="input1"、class="input2" 等等。

我的问题是我不知道要添加所有这些值，并且鉴于我有超过 50 个输入，我不想“手动添加它们”。

感谢任何形式的帮助。

【问题讨论】：

为什么要在类上增加数字，只是给所有输入同一个类，这样选择它们更容易，选择器执行得更快？
@Psyche - 我同意 Jasper 的观点 - 如果让所有你想要求和的输入具有相同的类名是可能的，那肯定会让事情变得更干净。

标签： javascript jquery forms

【解决方案1】：

如果您将所有要添加的输入与input1、input2 等类一起装饰，这将获得所有这些输入中当前值的总和

var sum = 0;

$("input[class *= 'input']").each(function(){
    sum += +$(this).val();
});

那么自然如果你想把这个值放在id为destination的输入中

$("#destination").val(sum);

这是fiddle

编辑

如果您希望在任何这些文本框更改时运行它，那么您可以将它放在更改事件处理程序中

$(document).on("change", "input[class *= 'input']", function() {
    var sum = 0;

    $("input[class *= 'input']").each(function(){
        sum += +$(this).val();
    });

    $("#destination").val(sum);
});

这是fiddle

编辑

根据 Jaspers 的评论，如果您知道 input1、input2 等，将始终成为您输入的第一类，即，您将永远 > 做

<input class='someNewClass input1'

那么你可以

$("input[class ^= 'input']").each(function(){

^= 表示以开头，而*= 表示包含任何位置。

【讨论】：

[class ^= 'input'] 匹配字符串的开头而不是字符串中的任何位置会不会更合适？
@Jasper - 可能，是的。但是，如果 OP 决定做<input class='someNewClass input1'，那将打破
@AdamRackis，我对帖子进行了一些编辑，因为我想在用户在其中一个输入中输入值后即时计算总和。
@Psyche 你在用 jquery 1.7 吗？
@Psyche - 这是旧 jQuery 版本的老派方法$(document).delegate("input[class *= 'input']", "change", function() {...

【解决方案2】：

给它们一个通用名称，您需要解析该值，因为它最初是文本

var result= 0;

$("input[name='sum']").each(function(){
    result = result + parseInt($(this).val(),10);
});

【讨论】：

如果您在 parseInt 调用中添加 radix 参数，我会为此 +1。
我在打字时正在思考，但后来错过了。谢谢:)