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.
도움이 되셨다면, 구독과 좋아요.... 아니아니 ...
공감 버튼 꾸욱 눌러주세요 ~~
'[javascript]' 카테고리의 다른 글
| jquery 모든 radio button 모두 값 가져오기 (0) | 2018.05.01 |
|---|---|
| jquery 모든 radio button 모두 초기화 하기 (0) | 2018.05.01 |
| jquery 선택자(selectors) 부모(parent) > 자식(child) 배경화면 랜덤으로 바꾸기 (0) | 2018.04.27 |
| 비주얼 스튜디오 코드 한줄 ,복사 지우기 , 정렬 , 주석 단축키 (0) | 2018.04.27 |
| json를 stringify 사용해보기 (json.stringify로 string으로 바꿔주기) (0) | 2018.04.26 |
미나미나미