javascript - 基于所选值和表单输入值的实时计算

Question

我想做一个实时计算，输出将从输入字段中打印出来。我必须通过选定的单选按钮或手动输入将数据放入该特定输入字段。当从单选按钮中选择输入字段数据时，我已经完成了实时计算，但是当我手动输入输入字段时会出现问题。如何在键入或选择值时进行实时计算？

$(function(){
  $('input[type=radio]').on('click',function(){
    data= $(this).data('price');
    $('#result').val(data);
    $('#result2').text(data*3);
   
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="1" value="a1">a1
    <input type="radio" name="highlight" data-price="2" value="a2">a2
    <input type="radio" name="highlight" data-price="3" value="a3">a3
    <input type="radio" name="highlight" data-price="4" value="a4">a4

    <input type="number" id='result'>
    <div id='result2'></div>

标签： javascripthtml

Answer 1

您可以使用 访问数字输入的值e.target.value。

这是一个例子：

$(function(){
  $('input[type=radio]').on('click',function(){
    data= $(this).data('price');
    $('#result').val(data);
    $('#result2').text(data*3);
   
  });
  
  $('#result').on("change", function(e) {
    data= e.target.value;
    $('#result').val(data);
    $('#result2').text(data*3);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="1" value="a1">a1
    <input type="radio" name="highlight" data-price="2" value="a2">a2
    <input type="radio" name="highlight" data-price="3" value="a3">a3
    <input type="radio" name="highlight" data-price="4" value="a4">a4

    <input type="number" id='result'>
    <div id='result2'></div>