jquery change 및 선택자로 알아보기 jQuery change 함수를 알아보겠습니다.아래와 같이 input 4개가 있을 때, 첫번째, id로 접근하는 방법 두번째, class로 접근하는 방법 세번째, id로 두개의 값이 변경되었을 때 확인하는 방법 네번째, 전체 input에서 변경이 일어났을 때 확인하는 방법을 알아보겠습니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>닉네임 : </label> <input id="nickname" class="input_change" value="닉네임"/> <label>취미 : </label> <input id="hobby" class="input_change" value="hobby"/> <label>전공 : </label> <input id="major" value="전공"/> 첫번째
- id로 접근하는 방법 input id=""로 값을 지정해줍니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>닉네임 : </label> <input id="nickname" class="input_change" value="닉네임"/> $("#id").change(function(){ //실행할 내용 }); 아래와 같이 작성하시면 input에서 값이 변경이 일어나는 경우 alert창을 통해서 감지가 되었음을 알 수 있습니다. $("#name").change(function(){ alert("id name 값이 변경되었습니다."); }); $("#nickname").change(function(){ alert("nickname 값이 변경되었습니다."); }); 두번째 - class로 접근하는 방법 class =""로 값을 지정해줍니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>닉네임 : </label> <input id="nickname" class="input_change" value="닉네임"/> <label>취미 : </label> <input id="hobby" class="input_change" value="hobby"/> $(".class").change(function(){ //실행할 내용 }); id에는 #이 붙지만 , class의 경우 . 이 붙는다는 사실 잊지마세요 class = input_change가 붙은 input 이름 , 닉네임 , 취미 에서는 값이 변경되면 alert 창이 실행됩니다. $(".input_change").change(function(){ alert("class로 묶인 .input_change 변경되었습니다."); }); 세번째 - id로 두개의 input 접근하는 방법 id ="" 값을 지정해줍니다. <label>이름 : </label> <input id="name" class="input_change" value="이름"/> <label>전공 : </label> <input id="major" value="전공"/> $("#id,#id").change(function(){ //실행할 내용 }); input 두개의 input의 id를 Comma(,)로 이어주시면, 이름과 전공에서 값이 변경될시 alert창이 실행됩니다. $("#id,#major").change(function(){ alert("major 또는 id 값이 변경되었습니다."); }); 네번째 - 모든 input 접근하는 방법 따로, 지정하실 필요가 없습니다. $("input").change(function(){ //실행할 내용 }); 모든 input 값이 변경될시 alert창이 실행됩니다. $("input").change(function(){ alert("input 어딘가에서 값이 변경되었습니다."); }); 결과화면 See the Pen input_change by Nami (@NamuNami) on CodePen. 도움이 되셨다면, 구독과 좋아요.... 아니아니 ... 공감 버튼 꾸욱 눌러주세요 ~~ |