본문 바로가기
퍼블리셔(프론트)/js

선택된 체크박스의 value값 가져와 계산하기

by 장김치 2016. 9. 2.

[선택된 체크박스의 value값 가져와 계산하기]



생성된 게시판(목록) 에서 선택한 값만 가져와 계산을 하려면 어떻게 해야할까?




1. 선택자를 클릭할때 발생하는 이벤트 생성

2. 선택한 선택자마다 반복문을 사용하여 체크되었는지 확인

3. 해당 체크박스가 있는 열에서 가져올 데이터 지정 (value값)

4. 계산식 생성




$('#chkMaintainAll, .chkMaintain').click(function(){ // 1번 알고리즘 실행


        var sum = 0; // 합계 초기화 변수 -> 반복문 밖에서 선언해준다.


        $('.chkMaintain').each(function(){ // 2번 알고리즘 실행

            if ($(this).is(":checked") == true) 

            {

 // html 에서 선언해준 input type='hidden' 의 value값을 가져온다.

                var price_goods = 

parseInt($(this).parents('tr').find('input[name=price_goods]').val());

                sum = sum + price_goods;

            }

        });

        console.log(sum);

    });





cf) 위 코드는 전체선택했을때 합산식도 동일하기에 한꺼번에 같은 기능을 주기 위해서 선택자를 2개 두었다. 




 * 코드 알고리즘 작성시 주의사항


ㅡ 작성된 HTML문서에서 value 값을 가져올때 js에서는 문자열로 인식한다. 수식으로 계산되게 하기 위해서는 parseInt 함수를 사용하여 정수형으로 변환해준다. 


ㅡ 초기화 변수 선언은 반복문이 실행되기 전에 해주고, 계산수식은 반복문 안에서 처리, 

결과 출력은 반복문이 끝난뒤에 작성해준다.