jqueryに複数の値を追加するには？

Question

属性名= "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" />

注： - あなたの代わりにchange()のもkeyup()を使用することができます。

Answer 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" />

Answer 3

は、以下のようにjqueryの関数を使用してデータ[]入力のイベントのonchangeこの関数を呼び出します。コードがメモリから書かれており、あなたはすべてのキーを押すことによってそれを行うことができますjQueryのdocumentaion kaypressによる

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

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

Answer 4

をテストされていません。

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

});