使用jquery在文本字段上自动求和

时间:2016-08-25 03:18:03

标签: jquery html

请帮助我,我想使用jquery keyup添加三个字段和结果并导致总字段,但是不想工作?`

的javascript

< script type = "text/javascript" >
  function kerjakan() {
    var nilai1 = $('#input1').val();
    var nilai2 = $('#input2').val();
    var nilai3 = $('#input3').val();
    var nilai4 = parseInt(nilai1) + parseInt(nilai2) + parseInt(nilai3);

    if (nilai4 % 1 == 0) {
      $('#input4').val(nilai4);
    } else {
      $('#input4').val('');
    }
  }
$(document).ready(function() {
  $('#input1').keyup(kerjakan);
  $('#input2').keyup(kerjakan);
  $('#input3').keyup(kerjakan);
}); < /script>
html
<div class='col-xs-1'>
  <td>
    <input type='text' size='5' onchange="kerjakan();" name="padi" id="input1" value=""></input>
  </td>
</div>

<div class='col-xs-1'>
  <td>
    <input type='text' size='5' onchange="kerjakan();" name="palawija" id="input2" value=""></input>
  </td>
</div>

<div class='col-xs-1'>
  <td>
    <input type='text' size='5' onchange="kerjakan();" name="tebu" id="input3" value=""></input>
  </td>
</div>

<div class='col-xs-1'>
  <td>
    <input type='text' size='5' name="total" id="input4" value=""></input>
  </td>
</div>

`

1 个答案:

答案 0 :(得分:0)

$('.input').on('input',function(){
var inputValues = $(".input").map(function() {
    return Number($(this).val());
}).get().reduce(function(a, b) {
  return a + b;
}, 0);
$('#input4').val(inputValues)


})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
html
<div class='col-xs-1'>
  <td>
    <input type='text' size='5' name="padi" id="input1" value="" class='input'></input>
  </td>
</div>

<div class='col-xs-1'>
  <td>
    <input type='text' size='5' name="palawija" id="input2" value="" class='input'></input>
  </td>
</div>

<div class='col-xs-1'>
  <td>
    <input type='text' size='5' name="tebu" id="input3" value="" class='input'></input>
  </td>
</div>

<div class='col-xs-1'>
  <td>
    <input type='text' size='5' id="input4" value="" ></input>
  </td>
</div>

检查出来