使用Jquery獲取Total的文本框的總計

Question

我在表單中有許多textboxes在其中插入numeric values並獲取所有字段的總計。 總共有4個textboxes和1個匯總textbox 。 目前，我能夠獲取所有文本框的總值，但是我很困惑如何使用Jquery或javascript獲取Grand total文本框中的所有textbox總和。

這里是我的HTML和JS的小提琴

讓我知道該怎么做

Answer 1

只需將文本框的值設置為添加其他值的結果即可：

document.getElementById("grand-textbox-id").value = value1 + value2 + value3;

如果要使其自動執行，請將change事件處理程序添加到所有輸入：

var calculateSum = function() {
    document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
};
document.getElementById("input-1").onchange = calculateSum;
document.getElementById("input-2").onchange = calculateSum;
document.getElementById("input-3").onchange = calculateSum;

Answer 2

請嘗試輸入代碼

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".total").keyup(function(){ var first=0,second=0,third=0,fourth=0; if($("#text1").val()!="") { first=$("#text1").val(); } if($("#text2").val()!="") { second=$("#text2").val(); } if($("#text3").val()!="") { third=$("#text3").val(); } if($("#text4").val()!="") { fourth=$("#text4").val(); } $("#grand").val( parseInt(first)+ parseInt(second)+ parseInt(third)+ parseInt(fourth)); }); }); </script> <style tupe="text/css"> .total { } </style> First val <input type="text" class="total" id="text1" value="" /><br /> second val <input type="text" class="total" id="text2" value="" /><br /> Third val <input type="text" class="total" id="text3" value="" /><br /> Fourth val <input type="text" class="total" id="text4" value="" /><br /> Grand val <input type="text" class="" id="grand" value="" readonly />