在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;
}