在jQuery中汇总文本框列表

时间:2010-01-31 12:10:22

标签: javascript jquery

我有一个表格,其中有使用jquery动态添加的文本框。 文本框ID形成一个数组,即Quantity [0],Quantity [1],Quantity [2] ...

我想在这些文本框中添加数字,并在另一个名为“total_quantity”的文本框中显示该值,最好是将焦点移出数组文本框。

我该怎么办?我不介意使用jQuery或简单的javascript,这更容易。

3 个答案:

答案 0 :(得分:8)

我建议为您的数量字段提供一个公共类,以便:

<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[

的所有文本框

答案 1 :(得分:1)

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

答案 2 :(得分:0)

如果不能使用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;
}