如果一个输入中有相同的类，则多个输入字段的jquery总和

Posted 2023-03-06

【中文标题】如果一个输入中有相同的类，则多个输入字段的jquery总和

【英文标题】：jquery sum of multiple input fields if same class in one input

【发布时间】：2014-07-30 09:06:25

【问题描述】：

您好，我需要在一个输入中将相同类输入的值与类名总计相加。

<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />

<input type="text" class="total" value="" />

可能吗？

A working fiddle here

$(document).on("change", "qty1", function() 
    var sum = 0;
    $("input[class *= 'qty1']").each(function()
        sum += +$(this).val();
    );
    $(".total").val(sum);
);

【问题讨论】：

+1 表示询问可能吗？

那么，这意味着不可能吗？如果我将课程更改为 ID 怎么办？

那么，您发布的这个现有的可能代码不起作用？还是什么？？

意思是小菜一碟。

【参考方案1】：

我建议这个解决方案：

html

<input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />

    <input type="text" class="total" value="" />

<div id="result"></div>

js

$(".qty1").on("blur", function()
    var sum=0;
    $(".qty1").each(function()
        if($(this).val() !== "")
          sum += parseInt($(this).val(), 10);   
    );

    $("#result").html(sum);
);

fiddle

【参考方案2】：

您几乎拥有它，只需要针对适当的选择器稍微调整一下您的 JQuery

更新小提琴：http://jsfiddle.net/5gsBV/7/

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

【讨论】：

@Andrei 没问题！每当您想在 JQuery 中访问类或 id 时，您必须确保包含 . or # 即 .class 或 #id

再次感谢，还有一个问题jsfiddle.net/5gsBV/9 如何更改其他事件的“CHANGE”事件，以便即使在页面刷新后它也会对值求和？

@Andrei 我不相信该值会保存在页面刷新时的文本字段中。但这应该在 qty 字段发生更改的任何时候处理。

优秀的答案，$("document").on(.....) 也可以捕获动态添加的 HTML，这就是我的情况。

谢谢你，你也可以在我的一个项目中解决我一大早的问题。

【参考方案3】：

我认为你的问题在这里：

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

改成：

$(".total").val(sum);

---

我建议您使用keyup 而不是change 事件。

$(document).on("keyup"

【参考方案4】：

你差点就吃完了：

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

http://jsfiddle.net/DUKL6/1

【讨论】：

Adjit 更快：P 请删除。

【参考方案5】：

上述所有答案的问题在于，如果您输入的不是数字，它们就会失败。如果你想要对用户更友好的东西，你应该做一些验证，甚至在输入数字以外的值时给出一些反馈。

$('body').on('change', '.qty1', function() 
    var total=0;
    $(".qty1").each(function()
        quantity = parseInt($(this).val());
        if (!isNaN(quantity)) 
            total += quantity;
        
    );
    $('.total').val('Total: '+total);
);

【参考方案6】：

我们可以使用以下自己的功能

 (function( $ )
   $.fn.sum=function () 
    var sum=0;
        $(this).each(function(index, element)
            sum += parseFloat($(element).val());
        );
    return sum;
    ; 
)( jQuery );
//Call $('.abcd').sum();

http://www.gleegrid.com/code-snippet/javascript/jquery-sum-input-values-by-class/?filter=bygroup&group=JQuery

【参考方案7】：

$(document).on("keyup", ".qty1", function() 
    var sum = 0;
    $(".qty1").each(function()
        sum += +$(this).val();
    );
    $(".total").val(sum);
);

【讨论】：

无论何时提出答案，请考虑对您的代码进行注释以提高清晰度。

【参考方案8】：

$('.qty1').each(function()
  sum += parseFloat(this.value);
   );
console.log(sum);

【讨论】：

虽然代码对于有经验的人来说可能很容易理解，但初学者可能需要解释。请添加说明您的代码的作用以及它如何解决 OPs 问题。

【参考方案9】：

这将适用于纯 js

<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<p>Total Value :<span id="total">100%</span></p>
<p>Left Value :<span id="left">0.00%</span></p>

    var percenInput = document.querySelectorAll('.percent-input');
    for (let i = 0; i < percenInput.length; i++) 
        percenInput[i].addEventListener('keyup', getPercentVal)
    

    function getPercentVal() 
        var total = 0;
        var allPercentVal = document.querySelectorAll('.percent-input');
        for (var i = 0; i < allPercentVal.length; i++) 
            if (allPercentVal[i].value > 0) 
                var ele = allPercentVal[i];
                total += parseFloat(ele.value);
            
        
        document.getElementById("total").innerHTML = total.toFixed(2) + '%';
        document.getElementById("left").innerHTML = (100 - total).toFixed(2) + '%';