如何计算变化总和？

Question

如何计算变化的两个字段的总和？

我的HTML

<div class="field"> 
    <label for="field1">F1:</label> 
    <input type="number" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div> 
    <div class="field"> 
<label for="field2">Field2:</label> 
<input type="number" name="field2" disabled> 
</div> 

，我得到了这一点，但不能确定这是如何工作的/如何得到它的工作..

是否有更简单的方法来做到这一点？

Answer 1

input中的任何更改都会触发.on()的回调函数。内部获得值field1和field2并将其解析为int，因为它们将是一个字符串。加入他们两个和插入field3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field"> 
 
    <label for="field1">F1:</label> 
 
    <input type="number" id="field1" min="0" placeholder="0" Title="Only positive numbers" required/> 
 
</div> 
 
<div class="field"> 
 
    <label for="field2">Field2:</label> 
 
    <input type="number" id="field2"/> 
 
</div> 
 

 
<input type="number" disabled id="field3"></input> 
 

 
<script> 
 
    $("input").on("change", function() { 
 
    var ret = parseInt($("#field1").val()) + parseInt($("#field2").val() || '0') 
 
    $("#field3").val(ret); 
 
    }) 
 
</script>

Answer 2

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br> 
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br> 
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br> 
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br> 
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br> 
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br> 
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br> 
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br> 
<br><br> 
Total : <input type="text" name="total" id="total"/> 


    <script type="text/javascript"> 
function findTotal(){ 
    var arr = document.getElementsByName('qty'); 
    var tot=0; 
    for(var i=0;i<arr.length;i++){ 
     if(parseInt(arr[i].value)) 
      tot += parseInt(arr[i].value); 
    } 
    document.getElementById('total').value = tot; 
} 

    </script> 

链接： - How get total sum from input box values using Javascript? 或 链接： - http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

Answer 3

您可以在同一类设置为两个输入，然后在类的变化，你可以得到这些输入值的ID（你也可以设置），并简单地添加它们。

喜欢的东西：

<input id="input1" class="myclass"/> 
<input id="input2" class="myclass"/> 

，然后在JavaScript端：

$(".myclass").on("change", function(){ 
    var value1 = document.getElementById('input1').value; 
    var value2 = document.getElementById('input2').value; 
    var sum = parseInt(value1) + parseInt(value2); 
}); 

Answer 4

字符串转换为数字的使用+运营商如此+"0" === 0和+"1" + +"2" === 3

$(".input").on("keyup change click", function() { 
 
    var ret = +$("[name=field1]").val() + +$("[name=field2]").val(); 
 
    $("[name=field3]").val(ret); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field"> 
 
    <label for="field1">Field1:</label> 
 
    <input class='input' type="number" name="field1" value='0' min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div> 
 

 
<div class="field"> 
 
    <label for="field2">Field2:</label> 
 
    <input class='input' type="number" name="field2" value='0' min="0" placeholder="0"> 
 
</div> 
 

 
<div class="field"> 
 
    <label for="field3">Result:</label> 
 
    <input type="number" name="field3" disabled> 
 
</div>

Answer 5

你的方式是好的，但我更喜欢使用的输入事件处理程序，因为它是在更新总数更快。

此外，如果你想扩大总和进程来处理许多文本框（或多个），你可以做以下

$(document).ready(function(){ 
 
    $(".parameter").on("input",function() { 
 
     var total=0; 
 
     $(".parameter").each(function(){ 
 
      if(!isNaN(parseInt($(this).val()))) 
 
      { 
 
      total+=parseInt($(this).val()); 
 
      } 
 
     }); 
 
     $(".total").val(total); 
 
\t }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="field"> 
 
    <label for="field1">F1:</label> 
 
    <input type="number" class="parameter" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div> 
 
    <div class="field"> 
 
<label for="field2">F2:</label> 
 
<input type="number" class="parameter" name="field2" min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div> 
 
    <div class="field"> 
 
<label for="field2">F3:</label> 
 
<input type="number" class="parameter" name="field3" min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div> 
 
    <div class="field"> 
 
<label for="field2">Total:</label> 
 
<input type="number" class="total" name="total" min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div>

通过使用这种方式，您可以包含多达数场总之，所有你需要做的就是将class =“parameter”添加到这个新的数字字段中。