在jQuery中匯總文本框列表

Question

我有一個表單，其中有使用jquery動態添加的文本框。 文本框ID形成一個數組，即Quantity [0]，Quantity [1]，Quantity [2] ......

我想在這些文本框中添加數字，並在另一個名為“total_quantity”的文本框中顯示該值，最好是在焦點移出數組文本框時。

我該怎么做？ 我不介意使用jQuery或簡單的javascript，這更容易。

Answer 1

我建議為您的數量字段提供一個公共類，以便：

<input type="text" class="quantity" onblur="calculateTotal();" />

然后你就可以用jQuery定義以下函數：

function calculateTotal() {
    var total = 0;

    $(".quantity").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            total += parseFloat(this.value);
        }
    });

    $("#total_quantity").val(total);
}

每次焦點從數量字段onblur事件將觸發。 反過來，這將調用calculateTotal()函數。

---

如果您不想添加公共類，可以使用$("input[id^='Quantity[']")選擇器，正如Felix在下面的注釋中所建議的那樣。 這將匹配所有ID開頭的文本框： Quantity[

Answer 2

var Total = 0;
$("input[id^='Quantity[']").each(function() { Total += $(this).val()|0; });
$("#total_quantity").val(Total);

Answer 3

如果不能使用document.getElementsByName（），請使用以下函數，因為某些MVC框架（如Struts和Spring MVC）使用文本的name屬性將元素綁定到后端對象。

function getInputTypesWithId(idValue) {
    var inputs = document.getElementsByTagName("input");
    var resultArray = new Array();

    for ( var i = 0; i < inputs.length; i++) {
        if(inputs[i].getAttribute("id") == idValue) {
            resultArray.push(inputs[i]);
        }
    }
    return resultArray;
}