html输入type = number“可用”值中的更改。还将更改另一个输入类型=数字“总计”

Question

我想复制“可用”输入数字的更改并将其添加或减去到“总计”

• 如果此人将“可用”更改为“ 3”，则“总计”变为“ 9”。
• 如果此人将“可用”更改为“ 5”，则“总计”变为“ 11”。

$('#id1').bind('keyup click', function() {
    $('#id2').val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" name="total" id="id2" value="10">
<input type="number" name="available" id="id1" value="6">

但是如何使此代码起作用

Answer 1

您可以使用事件input捕获该字段中的所有更改。

var $borrowed = $('#id3');
var $total = $('#id2');
$('#id1').on('input', function() {
    $total.val(+$(this).val() + +$borrowed.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" name="total" id="id2" value="">
<input type="number" name="borrowed" id="id3" value="6">
<input type="number" name="available" id="id1" value="">

Answer 2

在此链接中检查您的要求 https://jsfiddle.net/jedzL38b/1/

$(document).ready(function(){
   $('input[type=number]').on('input',function(){
   if($(this).attr('id')=='id1')
   {
      $('#id2').val(parseFloat($('#id3').val())+parseFloat($(this).val()))
   }
   })



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" name="total" id="id2" value="">
<input type="number" name="borrowed" id="id3" value="6">
<input type="number" name="available" id="id1" value="">