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

【问题标题】：jquery sum of multiple input fields if same class in one input如果一个输入中有相同的类，则多个输入字段的jquery总和
【发布时间】：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 怎么办？
那么，您发布的这个现有的可能代码不起作用？还是什么？？
意思是小菜一碟。

标签： javascript html jquery css jquery-ui

【解决方案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) + '%';
    }

【讨论】：