안녕하세요. 터미네입니다.
이번 포스팅은 jQuery change함수를 소개합니다.
해당 포스팅을 읽기전에 앞서 포스팅한 세 개를
먼저 읽어보시면 이해에 큰 도움이 될 수 있습니다~ ^^
jQuery 라디오버튼 체크박스 사용하기
안녕하세요. 터미네입니다. 이번 포스팅은 jQuery로 라디오버튼 및 체크박스를 사용하는것을 소개합니다. 코드와 함께 설명 드리겠습니다. 우선 아래 html 코드 기반으로 jQuery 활용예제를 살펴볼
danbam.asbai.xyz
jQuery each문 사용법
안녕하세요. 터미네입니다. 이번 포스팅은 jQuery each문 사용을 소개합니다. each문 사용은 언제쓰냐면, 해당요소에 대해 여러개의 요소들을 처리할 때 사용합니다. 제가 요소라고 부르는 곳에는 id
danbam.asbai.xyz
jQuery this 사용법
안녕하세요. 터미네입니다. 이번 포스팅은 jQuery에서 사용시 활용하는 this를 소개합니다. this의 의미는 무엇일까요? 번역하자면 '이것'이라는 의미죠. jQuery에서의 this는 $안의 요소에 대해 기능을
danbam.asbai.xyz
jQuery change함수는 해당요소가
변화가 발생했을 때 혹은 이벤트가 발생했을 때
기능 구현에 사용하는 함수입니다.
제가 개인적으로 개발할 때,
자주쓰는 함수이기도 합니다. ^^
우선 change함수 구현을 보여드리기 앞서
전체 소스부터 확인해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input:radio[name=fruit]").change(function(){
console.log($(this).val());
if($(this).val()=="수박"){
$("#watermelon_span").show();
}else{
$("#watermelon_span").hide();
}
});
$("input:checkbox[name=sports]").change(function(){
$("input[name=sports]:checked").each(function(){
console.log($(this).val());
});
});
});
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="사과"/>사과</label>
<label><input type="radio" name="fruit" value="배"/>배</label>
<label><input type="radio" name="fruit" value="수박"/>수박</label>
<input type="button" value="값확인" onClick="checkRadioValue()"/>
<span id="watermelon_span" style="display:none;">
<label><input type="radio" name="watermelon" value="사과"/>작은수박</label>
<label><input type="radio" name="watermelon" value="사과"/>중간수박</label>
<label><input type="radio" name="watermelon" value="사과"/>큰수박</label>
</span>
</div>
<div>
<label><input type="checkbox" name="sports" value="축구"/>축구</label>
<label><input type="checkbox" name="sports" value="야구"/>야구</label>
<label><input type="checkbox" name="sports" value="배구"/>배구</label>
<input type="button" value="값확인" onClick="checkboxValue()"/>
</div>
</body>
</html>위 예제 html소스는 이전 포스팅에서 사용했었는데,
span태그가 추가되었고 display:none을 사용하여
보이지 않게 하였습니다.
change함수 구현은 두 개 했습니다.
첫 번째, 라디오버튼에서 "수박"을 클릭할 때
숨겨놓았던 span태그를 보이게 하는 것입니다.
여기서 라디오 버튼을 클릭하는 행위가
jQuery에서는 이벤트가 발생한다고 표현합니다.
"수박"외에 "사과","배"를 클릭하면
span태그가 숨겨지게 됩니다.
두 번째, 체크박스버튼을 클릭할 때마다
클릭되어진 체크박스의 value값들을
콘솔창에 로그를 남기는 것을 구현했습니다.
each함수는 복수개의 요소가 있을 때,
활용할 수 있는 jQuery 함수이며
이전 포스팅인 [jQuery each문 사용법]을 보시면
더 정확하게 아실 수 있으실겁니다. ^^
jQuery change함수에 대한 설명은 여기까지입니다.
긴글 읽어주셔서 대단히 감사드립니다.
다음 포스팅 기대해주세요!
'자바 웹 > front-end' 카테고리의 다른 글
| json을 배열화 하는 방법 (0) | 2023.02.02 |
|---|---|
| 자바스크립트 백틱(backtick) 사용 (0) | 2023.02.01 |
| jQuery 라디오버튼 체크박스 사용하기 (0) | 2023.01.17 |
| jQuery each문 사용법 (0) | 2023.01.17 |
| jQuery this 사용법 (0) | 2023.01.11 |