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

How to total the values of textbox having same class and put it inside the another textbox using jquery

本文关键字：文本 另一个 求和 同类 jquery 何使用      更新时间：2023-09-26

我怎样才能将具有类1、2和3的所有文本框的值相加，并将其放入sum_1、sum_2和sum_3

我尝试过这种方式

J查询在这里： 

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

这里的网页 ：

<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/

更新：

我怎样才能得到这些总和值

如果你想在加载时这样做，你可能应该做这样的事情 

$('.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'） 看起来像"item 1"

    2. $（this）.

  2. attr（'class'）.split（" "） 将是一个数组 ["item"， "1"]

  3. 然后我删除了item这个词并使用该"1"

这是一个演示

希望这有帮助。

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

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

在你的第二个小提琴中，你提到了$(".sum1")，而实际上你的类被命名为sum_1（不是sum1）。此外，jQuery库也需要添加到jsfiddle中

相关文章：