jquery 多个输入字段的总和，如果在一个输入中相同 class

Question

Hello I need to sum the values of same class input in one input with class name total.

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

Possible?

A working fiddle here

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

Answer 1

You pretty much had it, just needed to adjust your JQuery a little bit for the appropriate selectors

updated fiddle : http://jsfiddle.net/5gsBV/7/

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

Answer 2

I suggest this solution:

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

Answer 3

I think your issue is here:

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

change it to:

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

---

And instead of change event i suggest you to use keyup instead.

$(document).on("keyup"

Answer 4

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

Answer 5

We can use following own function

 (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

Answer 6

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

Answer 7

This will work with pure 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) + '%';
    }

Answer 8

You almost had it:

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

http://jsfiddle.net/DUKL6/ 1

Answer 9

The problem with all of the above answers is that they fail if you enter something other than a number. If you want something that is more friendly to users, you should do some validation, perhaps even give some feedback when a value other than a number is entered.

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

Answer 10

<input type="text" class="price" placeholder="enter number one" />
<input type="text" class="price" placeholder="enter number two" />
<input type="text" class="price" placeholder="enter number three" />
<input type="text" class="price" placeholder="enter number four" />
<input type="text" id="total">
<script>
$(document).ready( function() {
    $(document).on("keyup", ".price", function() {
        var sum = 0;
        $(".price").each(function(){
            sum += +$(this).val();
        });
        $('#total').val(sum);
    });
});
</script>