jQuery: SUM-Felder, wenn sie ausgefüllt sind

Question

Ich möchte SUM 4 Felder mit jQuery und setzen Sie die Dezimalstelle (Beispiel: 0,5) in ein anderes Feld.

Das erste Feld ist ein erforderliches Feld, das andere nicht. Wenn das erste Feld ausgefüllt wird, muss nur dieser Wert im Ergebnisfeld eingegeben werden.

Wenn eines der anderen Felder ausgefüllt ist, muss die Summe dieser Felder in das Ergebnisfeld eingegeben werden.

ich dieses Eingabefeld haben, als ‚LiquidRatioTotal‘ ist das Ergebnis Feld:

<input type="text" name="LiquidRatio1" id="LiquidRatio1" required> 
<input type="text" name="LiquidRatio2" id="LiquidRatio2"> 
<input type="text" name="LiquidRatio3" id="LiquidRatio3">  
<input type="text" name="LiquidRatio4" id="LiquidRatio4">            
<input type="text" name="LiquidRatioTotal" id="LiquidRatioTotal" required> 

, wie ich das realisieren kann?

Vielen Dank.

Answer 1

Um dies zu erreichen, können Sie allen Ratio-Eingängen einen input Event-Handler hinzufügen, der all ihre Werte addiert. Um das zu vereinfachen, können Sie den Eingängen eine Klasse hinzufügen, um sie zu gruppieren. Wenn für die Eingabe kein Wert angegeben ist, können Sie den Wert für die Berechnung auf 0 setzen. Beachten Sie auch, dass ich das "Gesamt" -Feld readonly gemacht habe, da ich davon ausgehe, dass Benutzer das nicht bearbeiten dürfen. Versuchen Sie folgendes:

$('.liquidRatio').on('input', function() { 
 
    var total = 0; 
 
    $('.liquidRatio').each(function() { 
 
    total += parseFloat($(this).val()) || 0; 
 
    }); 
 
    $('#LiquidRatioTotal').val(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="LiquidRatio1" id="LiquidRatio1" class="liquidRatio" required /> 
 
<input type="text" name="LiquidRatio2" id="LiquidRatio2" class="liquidRatio" /> 
 
<input type="text" name="LiquidRatio3" id="LiquidRatio3" class="liquidRatio" /> 
 
<input type="text" name="LiquidRatio4" id="LiquidRatio4" class="liquidRatio" /> 
 
<input type="text" name="LiquidRatioTotal" id="LiquidRatioTotal" required readonly />

Answer 2

Wie wäre das?

var Sum = 0; 

$('input[id^="LiquidRatio"]').each(function() { 
    if ($(this).val() != "" && $(this).attr('id') != 'LiquidRatioTotal') { 
     Sum = Sum + parseFloat($(this).val()); 
    } 
}); 

$('#LiquidRatioTotal').val(Sum); 

Answer 3

Danke Jungs, fand ich eine andere gute Methode, die funktioniert:

$(document).on("change", ".liquidRatio", function() { 
    var sum = 0; 
    $(".liquidRatio").each(function(){ 
     sum += +$(this).val(); 
    }); 
    $(".totalRatio").val(sum.toFixed(1)); 
}); 

Answer 4

Warum Sie eine jQuery Antwort erfordern, werden? Dies ist nicht 1997. Die Vanille-Javascript-Antwort ist kürzer, einfacher zu verstehen, und erfordert keine Bibliothek Abhängigkeit.

Ich gehe davon aus, dass Sie alle Eingaben auf der Seite treffen möchten. Wenn nicht, ändern Sie den Selektor, um nur die gewünschten zu treffen (am einfachsten ist es, eine Klasse zu den relevanten Eingaben hinzuzufügen und dann stattdessen für diese Klasse auszuwählen.)

Zuerst benötigen Sie eine Funktion, die all diese erhalten wird Zahlen für

Sie

const getNums =() => [... document.querySelectorAll('input')].map(i => i.value); 

Fasst Funktionen sind einfach:

const sum = arr => arr.reduce((a,b) => a+b, 0); 

Als nächstes müssen Sie eine Funktion, die etwas mit den Werten der Fall ist. Sie haben nicht gesagt, was, also, ich werde nur summieren und schreibe sie an einige <div id="output">, die ich vermute, existiert.

const outNums = nums => document.getElementById('output').innerHTML = sum(nums); 

Schließlich müssen Sie die Eingänge dekorieren, so dass sie wissen, um dies tatsächlich zu tun.

document.querySelectorAll('input').onchange =() => outNums(getNums()); 

Der endgültige Code:

const getNums =() => [... document.querySelectorAll('input')].map(i => i.value || 0), 
     sum  = arr => arr.reduce((a,b) => a+b, 0); 
     outNums = nums => document.getElementById('output').innerHTML = sum(nums); 

document.querySelectorAll('input').onchange =() => outNums(getNums()); 

Bitte setzen jquery jetzt weg. Es ist Zeit weiterzugehen.

Answer 5

Zuerst entfernen Sie das Eingabeattribut 'required' und ersetzen es durch 'readonly' (da es nicht zum Schreiben, sondern zum Lesen verwendet wird).
Zweitens einige JS:

$('input[id*="LiquidRatio"]').on('input',function() { 
    var sum=0; 
    for (var i=1;i<=4;i++) { 
    if ($('#LiquidRatio'+i).val() && !isNaN($('#LiquidRatio'+i).val())) { 
     sum+=parseFloat($('#LiquidRatio'+i).val()); 
    } 
    } 
    $('#LiquidRatioTotal').val(sum); 
});