input 태그 속성 만들기 data-이름

input 태그 속성 만들기

input 태그의 속성 값으로 데이터를 많이 전달하게 되는데

그 속성을 직접 만들어서 사용할 수 있습니다!

 

data-이름=" "

 

타임리프 문법 사용시

th:data-이름=" "

 

 

이름은 하이픈으로 만들어주기!

해당 속성값을 받아올 때는 하이픈으로된 이름을 카멜식으로 받을 수 있음

 

ex)

data-item-name -> itemName

 

 

 

만든 속성 사용하는 법

 

해당태그선택.dataset.속성명

 

 

예시)

html

th:each="cart : ${cartList}"

컨트롤러에서 받아온 cartList를 cart로 하나씩 꺼냅니다.

 

html

th:data-total-price="${cart.itemVO.itemPrice * cart.cartCnt}"

data-total-price의 속성을 만들어서 th:each로 꺼낸 객체의 필드를 값으로 넣어줍니다.

 

js

체크된 chk클래스이름을 갖는 체크박스들을 선택

const checkedChks = document.querySelectorAll('.chk:checked')

 

checkedChks은 체크박스가 여러개이기 때문에

forEach로 체크박스 하나씩 꺼내줍니다.

 

 

checkedChks.forEach(function(element, idx){

element.dataset.totalPrice

})

 

이때 하나의 체크박스의 dataset으로 totalPrice 값을 받아올 수 있습니다.