[jQuery] 이름이 비슷한 input 값 합산하기

웹 개발을 하다 보면 여러 개의 input의 값을 합산하거나 체크해야 하는 경우가 발생합니다. 보통 이런 경우 두 가지 방식을 활용 가능합니다.

 

만약 아래와 같이 html이 구성되어있다면

<!-- 값 -->
값1: <input type="text" name="type01" class="in_box"/><br/>
값2: <input type="text" name="type02" class="in_box"/><br/>
값3: <input type="text" name="typett" class="in_box"/><br/>
값4: <input type="text" name="typexx" class="in_box"/><br/>
<!-- 버튼 -->
<button type="button" onclick="doSum()">합계</button><br/>
<!-- 합계 -->
합계: <input type="text" name="sum" value=""/>

 

  비슷한 name으로 합산하는 방법 → $("input[name*='키값']")

function doSum(){
    let sum = 0;
    $('input[name*="type"]').each(function(){
        // type으로 시작하는 input을 순차적으로 loop
        if(!isNaN($(this).val())){
            // CASE 값에 문자가 없는 경우 (숫자인 경우만 합산)
            sum += parseInt($(this).val());
        }
    });
    
    // 합산한 값을 name="sum"인 input에 넣어줌
    $("input[name=sum]").val(sum);
}

 

  같은 클래스명으로 합산하는 방법

function doSum(){
    let sum = 0;
    $('input.in_box').each(function(){
        // type으로 시작하는 input을 순차적으로 loop
        if(!isNaN($(this).val())){
            // CASE 값에 문자가 없는 경우 (숫자인 경우만 합산)
            sum += parseInt($(this).val());
        }
    });
    
    // 합산한 값을 name="sum"인 input에 넣어줌
    $("input[name=sum]").val(sum);
}

 

첫 번째의 경우 유사하지만 포함되지 않는 input을 걸러내기에 부적절하지만(each내부에서 name을 따로 걸러주어야 함) 사용이 편리하다는 장점이 있고, 두 번째의 경우 유사하지만 포함되지 않는 input을 걸러내기에 적절하지만 각 input에 class를 걸어줘야 하는 번거로움이 있기 때문에 입맛에 맞는 걸 선택해서 사용하시면 될 것 같습니다.

 

※ 샘플 예시 (PC 버전에서만 테스트됩니다) : jsfiddle.net/f05bcp7y/2/

Edit fiddle - JSFiddle - Code Playground

값1:

값2:

값3:

값4:

합계: