jQuery에서 텍스트 상자 목록 합계

Question

jquery를 사용하여 동적으로 추가 된 텍스트 상자가있는 양식이 있습니다. 텍스트 상자 ID는 배열로 구성됩니다. 즉, 수량 [0], 수량 [1], 수량 [2] ...

이 텍스트 상자에 숫자를 추가하고 다른 값을 표시하려고합니다. 가급적이면 포커스가 배열 텍스트 상자 밖으로 이동 될 때 "total_quantity"라는 텍스트 상자를 사용하는 것이 좋습니다.

어떻게하면됩니까? 나는 jQuery 나 평범한 자바 스크립트를 사용하는 것을 꺼린다. 나는 당신의 수량 필드에 공통 클래스를 제공 제안

Answer 1

있도록 :

가

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 이벤트가 발생합니다 :

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

은 그럼 당신은 jQuery를 다음과 같은 함수를 정의 할 수있을 것이다 초점이 수량 필드에서 이동할 때마다 차례로 이것은 calculateTotal() 함수를 호출합니다. 당신이 일반적인 클래스를 추가하지 않으려는 경우 펠릭스 아래의 코멘트에 제안으로

---

, 당신은 $("input[id^='Quantity[']") 선택기를 사용할 수 있습니다. 같은 스트럿츠와 스프링 MVC 사용과 같은 일부 MVC 프레임 워크로, 하나는 document.getElementsByName을 (사용할 수없는 경우 Quantity[

Answer 2

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

Answer 3

는) 다음 함수를 사용하여이로 시작하는 ID를 가진 모든 텍스트 상자를 일치합니다 요소를 백엔드 오브젝트에 바인드하는 텍스트의 이름 속성.

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