如何使用jquery对具有相同类的文本框的值求和并将其放入另一个文本框内

Question

如何可以具有总类中的所有文本框的值1 ， 2和3 ，并把它内部sum_1 ， sum_2和sum_3

我尝试过这种方式

jQuery在这里：

   $(document).on("change", ".1", function() {
    var sum = 0;
    $(".1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

HTML在这里：

<input type="text" class="1" value="1" />
<input type="text" class="2" value="2" />
<input type="text" class="3" value="5" />

这是小提琴http://jsfiddle.net/5gsBV/36/ ，对一个值有效

但是我该如何针对3个值执行此操作，就像我在提琴http://jsfiddle.net/vL6f2tow/1/中给出的问题中所问的那样

更新：

我怎样才能得到那些总和的值

Answer 1

如果要在负载下执行此操作，则可能应该执行以下操作

$('.item').each(function(){
    var itemNumber = $(this).attr('class').split(" ");
    itemNumber.splice( itemNumber.indexOf("item"), 1 );
    var sumElement = $(".sum_" + itemNumber);
    var sum = (sumElement.val() == "") ? 0 : parseInt(sumElement.val());
    sum += parseInt($(this).val());
    sumElement.val(sum);
});

这是一个计算本地总和的演示

如果要计算全局总和（本地总和），请看演示2

---

如果您有多个这样的输入组，则必须为这些输入中的每一个添加一个类，以便您知道要考虑为其计算总和的输入元素。

<input type="text" class="item 1" value="1" />
<input type="text" class="item 2" value="2" />
<input type="text" class="item 2" value="3" />
<input type="text" class="item 2" value="4" />
<input type="text" class="item 3" value="5" />
<input type="text" class="item 3" value="6" />
<input type="text" class="item 3" value="7" />
<br>
<br>
<input type="text" class="sum_1" value="" />
<input type="text" class="sum_2" value="" />
<input type="text" class="sum_3" value="" />



 $(document).on("change", ".item", function () {
    var sum = 0;
    var itemNumber = $(this).attr('class').split(" ");
    itemNumber.splice( itemNumber.indexOf("item"), 1 );
    $('.'+itemNumber).each(function () {
        sum += parseInt($(this).val());
    });
    $(".sum_" + itemNumber).val(sum);
});

在上面的脚本中，

1. $（this）.attr（'class'）看起来像“项目1”

2. $（this）.attr（'class'）。split（“”）将是一个数组[“ item”，“ 1”]

3. 然后，我删除单词item并使用"1"

这是一个演示

希望这可以帮助。

Answer 2

在第二个小提琴中，您引用了$(".sum1") ，而实际上您的班级名为sum_1（而不是sum1）。 另外，jQuery库也需要在jsfiddle中添加

Answer 3

如mayanktum所述，您忘记添加jQuery。 同样在最后一行中，您错误地将选择器命名为$(".sum1")而不是$(".sum_1"); 。 之后，一切正常。

$(document).on("change", ".1", function() {
    var sum = 0;
    $(".1").each(function(){
        sum += +$(this).val();
    });
    $(".sum_1").val(sum);
});