jQuery：如何使用类名在多个字段中添加浮点值

Question

Using jQuery, I have float values in fields with similar class names " score "and I just want to make a function that will add all float values in those fields and assign the result to " field5 ".

<input id="field1" type="text" class="score">2.5</input>
<input id="field2" type="text" class="score">6.02</input>
<input id="field3" type="text" class="score">1</input>
<input id="field4" type="text" class="score">4.03</input>
<input id="result" type="text" class="result"></input>

I made the script below but it doesn't work even though the function executes.

$(.score).on('change',function(){
    var total = 0
    $(this).each(function(){
       total += this.value;
  });
});
    $('#result').val(total);
    });

Answer 1

Lot of issues in your code:

JS:

$(".score").on('keyup', function () {
    var total = 0
    $(".score").each(function () {
        total += parseFloat(this.value);
    });
    $('#result').val(total);
});

HTML

<input id="field1" type="text" class="score" value="1"/>
<input id="field2" type="text" class="score" value="1.2"/>
<input id="field3" type="text" class="score" value="1.4"/>
<input id="field4" type="text" class="score" value="3.1"/>
<input id="result" type="text" class="result" value=""/>

Demo: http://jsfiddle.net/GCu2D/839/

1. input is a self closing tag. You should use it like in this example
2. You should iterate on $(".score") instead of $(this) to get all input values. Latter will give only the current input's value.
3. Use parseFloat to convert the string type into float. By default you get string value from the .value . In order to add them, you need to convert them to float
4. Your selector $(.score) is invalid. Use $(".score") .
5. $('#result').val(total); should be inside the event handler.

Answer 2

First of all, I believe .change() is used with dropdowns. Try using .keydown() to detect a change in an input box.

There are a few errors in your code -

var total = 0;

Semicolon is missing.

$('#result').val(total);

This will assign the value and will not show it. If you wish to display teh value as well, use

$('#result').append(total);

Answer 3

$(document).ready(function(){
            $(".score").on('change',function(){
                var total = 0.00;
                $(".score").each(function(){
                    if(undefined != $(this).val() && "" != $.trim($(this).val()))
                        total += parseFloat($(this).val());
                });
                $('#result').val(total);
            });

        });

Answer 4

I finally figured it out. Thanks guys!

function getResult(){
  var total = 0;

  $('.score').each(function(){
    var checkval= parseFloat(this.value);
    if(!isNaN(checkval)) total += checkval;
  });  
  $('#result').val(total.toFixed(2));
}