ふたりで

jquery 선택요소의 Data 값 가져오기, 수정하기 본문

javascript

jquery 선택요소의 Data 값 가져오기, 수정하기

graykang 2022. 10. 26. 17:58
728x90
반응형
SMALL

화면이 로딩될때 체크 박스에 Data 값을 여러게 설정 하고 이후 체크박스에 이벤트가 발생 할 경우

설정된 Data 값을 가져와 조작 하고 업데이트를 할때 참고...

첫번째 체크박스 class="js_checked"를 클릭하면 attribute로 정의된 data 값들을 console에 출력 하며 data값중 pdtstock

의 값을 N으로 업데이트 한다.

이후 두번째 체크박스  class="js_checked1"를 클릭하면 첫번째 체크박스 class="js_checked"를 참조하여 이전에 클릭

하여 변경된 pdtstock 값을 console에 출력 한다.

개발자도구를 사용해 document 요소를 확인 해보면 data-pdtstock에 보여지는 값은 변하지 않지만 실재로는 값이 변경되는걸로 확인 된다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>  </head>
<body>
  <input type="checkbox" class="js_checked"
    data-pdtcode="1"
    data-pdtprice="1000"
    data-pdtstock="Y"
    value="1"/><span>첫번째check박스</span>
  <input type="checkbox" class="js_checked1" value="1"/><span>두번째check박스</span>

  <script type="text/javascript">
$(document).ready(function(){
	$(document).on('change','.js_checked', function(e){
    	console.log("js_checked의pdtcode:"+$(this).data('pdtcode'));
        console.log("js_checked의pdtprice:"+$(this).data('pdtprice'));
        console.log("js_checked의pdtstock:"+$(this).data('pdtstock'));
        $(this).data('pdtstock','N');
        console.log("js_checked의 수정된pdtstock:"+$('.js_checked').data('pdtstock'));

        });
  
 	$(document).on('change','.js_checked1', function(e){
        console.log("js_checked1클릭js_checked의 수정된pdtstock:"+$('.js_checked').data('pdtstock'));

        });
 
});

</script>
</body>
</html>

-결과:

 

728x90
반응형
LIST
저작자표시

'javascript' 카테고리의 다른 글

jquery+javascript 전화번호 자동완성 및 유효성검사  (0) 2022.10.28
moden javascript attribute data get set (선택요소의 data값 가져오기, 수정하기 moden javascript방법)  (0) 2022.10.27
크롬 개발자 도구 차단 2, Detect browser developer tools by javascript 2(chrome, firefox, Edge)  (2) 2022.10.25
javascript D-Day 날짜계산 일,시,분,초  (0) 2022.10.18
개발자 도구 차단 1, Detect browser developer tools by javascript 1 (chrome, firefox, Edge)  (0) 2022.10.06
'javascript' Related Articles more
Comments