![](/img/trans.png)
[英]How do I use javascript or jquery to find a sum and product of values from a forms field inputs?
[英]How do I get the sum of three inputs values in a span using JavaScript or jQuery?
我對輸入只有一個正值。
var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name="3"]'), input4 = $('[name="4"]'); input.change(function() { var val1 = (isNaN(parseInt(input1.val())))? 0: parseInt(input1.val()); var val2 = (isNaN(parseInt(input2.val())))? 0: parseInt(input2.val()); var val3 = (isNaN(parseInt(input3.val())))? 0: parseInt(input3.val()); input4.val(val1 + val2 + val3); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input type="number" id="number1" name="1" min="0" max="8" value="0" /> <input type="number" id="number3" name="3" min="0" max="8" value="0" /> <input type="number" id="number2" name="2" min="0" max="8" value="0" /> <input type="number" id="number3" name="3" min="0" max="8" value="0" /> <span class="total-select" name="4">0</span>
您可以使用each
循環來遍歷您的輸入並從每個輸入中獲取所需的值,然后將它們添加,然后使用$(".total-select").text(val);
在你的跨度內相同
演示代碼:
$("input[type=number]").change(function() { var val = 0; //loop through each inputs $("input[type=number]").each(function() { //sum values val += parseInt($(this).val()) }) //put in span $(".total-select").text(val); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="number1" name="1" min="0" max="8" value="0" /> <input type="number" id="number3" name="3" min="0" max="8" value="0" /> <input type="number" id="number2" name="2" min="0" max="8" value="0" /> <input type="number" id="number4" name="3" min="0" max="8" value="0" /> <span class="total-select" name="4">0</span>
試試這個,你的片段有很多錯字。 使用parseInt(input1.val())|0
檢查並獲取一個值,如果 value 為 NaN,則 value = 0
var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name="3"]'), input4 = $('[name="4"]'); input.change(function() { var val1 = parseInt(input1.val())|0; var val2 = parseInt(input2.val())|0; var val3 = parseInt(input3.val())|0; input4.html(val1 + val2 + val3); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="number1" name="1" min="0" max="8" value="0" />+ <input type="number" id="number2" name="2" min="0" max="8" value="0" />+ <input type="number" id="number3" name="3" min="0" max="8" value="0" />= <span class="total-select" name="4">0</span>
考慮到您可以使用Array.prototype.reduce方法獲得數組中包含的數字的總和:
const arr = [1, 2, 3, 4, 5]; const total = arr.reduce((sum, n) => sum + n, 0); console.log(total);
您可以使用toArray jQuery 方法將jQuery
輸入選擇轉換為數組,並應用相同的技術來獲得結果:
const inputs = $('input[type="number"]'); const span = $('span[name="4"]'); inputs.on("change", () => { span.text( inputs.toArray().reduce((sum, item) => sum += (+item.value || 0), 0) ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="number1" name="1" min="0" max="8" value="0" /> <input type="number" id="number3" name="3" min="0" max="8" value="0" /> <input type="number" id="number2" name="2" min="0" max="8" value="0" /> <span name="4">0</span>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.