2017-04-04 136 views
2

如何使用屬性name =「data []」添加值,並將結果輸入到屬性name="total_data"如何在jquery中添加多個值?

當在數據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" />

+3

[總和jQuery中的文本框的列表](// stackoverflow.com/q/2171597)和[jQuery的計算值的總和在所有文本字段(// stackoverflow.com/q/2417553) – Tushar

回答

2

你可以像下面: -

$('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()

+0

謝謝,多數民衆贊成在工作得很好..我把替換功能鍵控功能 –

+0

@silviazulinka是的,你可以做到這一點。我剛剛發佈了一種方法來做到這一點。很高興幫助你 –

2

嘗試以下方式:

$('.input-data').change(function(){ 
 
    var inputs = document.querySelectorAll('.input-data'); 
 
    var total = 0; 
 
    inputs.forEach(function(node, index){ 
 
     if(node.value != ""){ 
 
      total += parseInt(node.value); 
 
     } 
 
    }); 
 
    document.getElementsByClassName('input-data-total')[0].value = 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="text" class="input-data-total" value="" placeholder="Total Data" />

1

使用一個jquery函數如下面和調用該函數的電平變化的數據[]輸入事件。代碼從存儲器寫入,而不是測試

function doTotal(){ 
    var total=0; 
    $("input[name='data[]']").each(function(){ 
     total+=$(this).val(); 
    }); 

    $("input [name='totalData']").val(total); 
} 
0

據jQuery的文件建立kaypress您可以通過每一個按鍵做。

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

    }); 
    $('input[name="total_data"]').val(sum); 

});