[Spring] 쇼핑몰 - 36 장바구니 체크박스 해제시 변경 데이터

 

체크 박스가 해제되었을때, 구매 금액에서도 제외될 수 있도록 해보자.

---

cart.html

반복되는 체크박스 각 한줄들이 클릭될 때마다 js함수를 setFinalPrice 이름으로 실행시켰다

속성명 앞에 data-  넣으면 임의의 데이터를 사용할 수 있다.

data-  뒤에 memAge와 같이 대문자를 표현할 때에는 data-mem-age 를 사용하면 된다.

th:attr 은 타임리프 문법이어서 사용했다

cart.js

클래스로 chk로 된 모든 체크박스들이 체크표시 되어있는 값들을 checkedChks로 데이터를 저장했다.

그리고, totalPriceChk 데이터 값을 chk의 가장 가까운 부모테이블로 찾아간 값을 spanTag로 저장한다.

 

위 html에서 data-name으로 데이터 java 넣었다. 콘솔창으로 표시가 잘 되었고, totalPrice도 th문법으로 넣은 뒤 데이터를 불러온 것도 확인해볼 수 있다.

cart.html

마지막으로 구매금액에 나올 데이터에 id 값을 finalPrice로 설정해준 뒤 아래 js에서 데이터를 바꿔주면된다. 

cart.js

for문에서 최종적으로 받아온 데이터 값으로 대체해주자. toLocaleString()은 천단위 숫자를 표시해준다..

이렇게 체크된 데이터 들만 최종 구매금액으로 표시될 수 있게된다.