你可以试试。

Question

我需要将两个用户输入字段相乘并在第三个字段中显示结果。当任一用户输入字段发生更改时，结果字段必须更改。

<input type="number" name="rate" id="rate" />
<input type="number" name="box" id="box" />

结果应该在第三个字段中，当上述两个字段中的任何一个被更改时，该字段会发生变化。这完全取决于用户输入

<input type="number" name="amount" id="amount" readonly />

我需要使用Jquery进行乘法运算。

提前致谢

Answer 1

试试这个：为change和rate输入框绑定box事件监听器，然后在其中将这些值相乘以将其放入amount输入中。

$('#rate, #box').change(function(){
    var rate = parseFloat($('#rate').val()) || 0;
    var box = parseFloat($('#box').val()) || 0;

    $('#amount').val(rate * box);    
});

<强> DEMO

您可以在输入其他字段后立即使用keyup事件计算amount

$('#rate, #box').keyup(function(){
    var rate = parseFloat($('#rate').val()) || 0;
    var box = parseFloat($('#box').val()) || 0;

    $('#amount').val(rate * box);    
});

<强> DEMO

Answer 2

试试这个：绑定input事件监听器on率和框输入框，然后在里面将这些值相乘以将其输入数量。

input事件仅在输入值发生变化时触发，而change仅在字段失去焦点时触发。输入立即触发

$('#rate, #box').on('input',function(){
    var rate = parseFloat($('#rate').val()) || 0;
    var box = parseFloat($('#box').val()) || 0;

    $('#amount').val(rate * box);    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="number" name="rate" id="rate" value=""/>
<input type="number" name="box" id="box" value=""/>
<input type="number" name="amount" id="amount" readonly />

Answer 3

以上是我在上述情景中的2美分 - http://jsfiddle.net/ak9ejpne/3/

我的目标是保持代码清晰干净，有一些MVC味道。

function Operand(a,b){
  this.a = parseInt(a);
  this.b = b;
  this.c = (this.a)*(this.b);

  this.set = function(key,edit){
    this[key] = edit;
    this.c = (this.a)*(this.b);  
  };
  return this;
}

请告诉我这是否对您有用：）

Answer 4

你可以试试。

<script type="text/javascript"> 
    $("#txtOne,#txtTwo").on("change keyup", function(e){  
      var txtOne = parseFloat($("#txtOne").val()); 
      var txtTwo = parseFloat($("#txtTwo").val()); 
      var result = txtOne * txtTwo ; 
      if (!isNaN(result)) { 
          $("#txtAmount").val(result); 
       }  
    }); 
 </script>

将两个输入字段相乘并产生第三个字段，当使用jQuery更改任一输入字段时，该字段会发生变化

4 个答案:

你可以试试。