javascript - 如何在jquery中添加多个值？

Question

如何使用属性 name="data[]"添加值并将结果放入属性 name="total_data" 的输入？

在数据1、数据2等中键入输入时，结果将显示在总数据中并附加。 如果我在数据 1 中键入值 1，在数据 2 中键入值 3，则总数据将显示值 4。该怎么做？

<input name="data[]" type="number" class="input-data" value="" placeholder="data 1" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 2" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 3" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 4" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 5" /><br><br>
<input name="total_data" type="number" class="input-data" value="" placeholder="Total Data" />

Answer 1

你可以像下面那样做:-

$('input[name="data[]"]').change(function(){
  var total = 0;
  $('input[name="data[]"]').each(function(){
     if($(this).val() !==''){
        total +=parseInt($(this).val());
      }
    
  });
  $('input[name="total_data"]').val(total);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 1" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 2" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 3" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 4" /><br><br>
<input name="data[]" type="number" class="input-data" value="" placeholder="data 5" /><br><br>
<input name="total_data" type="number" class="input-data" value="" placeholder="Total Data" />

注意:- 您也可以使用 keyup() 代替 change()。