[shop]장바구니 체크박스 (js event 활용하기)

제목행 상단에 체크박스를 누르면 전체 상품이 체크되도록 하고, 아이템칸 체크박스를

전체 다 눌렀을 때도 제목행의 체크박스가 체크 되도록 한다.

또한, 아이템 칸의 체크박스 하나라도 해제되면 제목행의 체크박스의 체크가 없어지도록 할 것이다.

 

 

1. cartList에 id와 class 추가하기

1) 상단 체크박스는 id를 주었다.

</input type="checkbox" id="allChk">

 

2) 아이템 칸 체크박스는 foreach문으로 데이터를 불러올 것이다.

id는 반복 사용 불가이기 때문에, 반복 가능한 class를 이용하여 구분하게 한다.

</input type="checkbox" class="chk">

 

 

2. js 파일 만들기

구분하기 위해서 cartList.js 파일을 만들었다.

 

3. 이벤트문 작성 (addEventListener)

1) 제목 체크박스 클릭했을 때 (아이템 박스 모두 선택/ 모두 해제)

제목행의 체크박스
const allChk = document.querySelector('#allChk');

이벤트 (제목줄의 체크박스 클릭되면)
allChk.addEventListener('click', function(){



(input 태그에서 checked 표시하는것과 같이 allChk.checked로 설정해준다.)
const isChecked = allChk.checked;

아이템 칸 체크박스
const chk = document.querySelectorAll('.chk');

제목 줄의 체크박스가 체크 됐다면 장바구니의 모든 아이템 체크박스를 체크한다.
if(isChecked){

(★chk.checked = true; chk는 여러개의 아이템 체크박스가 있기 때문에 for문 또는 foreach문을 쓴다)

<방법1> for문
for( i = 0 ; i<chk.length ; i++){
 chk[i].checked = true;
}
<방법2>  forEach문
for(const e of chk){
e.checked = true;
}

}



그 외에는 장바구니 아이템 체크박스를 체크를 모두 해제한다.

else{
for(const e of chk){
e.checked = false;
}
}



})

 
2) 아이템 체크박스가 모두 체크 되거나 전체 중 몇개 체크 해제 했을 때

const chk = document.querySelectorAll('.chk');

아이템 체크박스가 전부 체크되면 제목 체크박스가 체크 되도록 
for(const e of chk){
e.addEventListener('click', e=>{



전체  아이템 체크박스의 수
const cnt = chk.length;

전체 아이템 체크박스 중 체크 표시 개수
const checkedCnt = document.querySelectorAll('.chk:checked').length;



전체 아이템 체크박스 개수와 체크 개수가 같다면 제목 체크박스에 체크표시
if(cnt == checkedCnt){
document.querySelector('#allChk').checked = true;
}



체크박스 중 하나 지웠을 때 제목 상단 체크 제거

else{
document.querySelector('#allChk').checked = false;
}

});
}

 

4. jsp

 <tr>
<td><input type="checkbox" id="allChk"></td>
 <td>상품이미지</td>
 <td>상품명</td>

 <td>단가</td>
<td>수량</td>
<td>총 가격</td>
<td>등록일자</td>
</tr>
<c:forEach var="cart" items="${cartList}">
<tr> 
<td><input type="checkbox" class="chk"></td>

<td><img src="images/${cart.imgDTO.attachedName }" width="80px;"></td>
<!-- cartDTO 안에 ItemDTO에 이름 있다 -->
<td>${cart.itemDTO.itemName }</td> 
<td> <fmt:formatNumber pattern="￦#,##0원" value="${cart.itemDTO.itemPrice }"/></td>
<td>${cart.putCnt }</td>
<td><fmt:formatNumber pattern="￦#,##0원" value="${cart.totalPrice }"/> </td>
<td>${cart.putDate }</td>
</tr>
</c:forEach>
</table>
</div>
(★ body태그 끝나기 전에 주소 넣어준다)
<script type="text/javascript" src="js/cart/cart_list.js"></script>

 

★JS에서 변경된 내용이 인식 되지 않을 때는 js?ver=04 이런형식으로 숫자를 변경하여 실행한다