welcome to haddoddo place🤩

IT & Development & Daily Log

#Hi

개발/javascript&jQuery

[JQuery] 라디오, 체크박스, 셀렉트박스 선택 값 가져오기, 이벤트 처리

haddoddo 2020. 8. 27. 13:03
반응형

 

 

 

 

안녕하세요 하또또입니다.

오늘은 Jquery를 이용하여 라디오라디오 버튼,셀렉트박스의 체인지 이벤트와 체크박스 클릭 이벤트를 처리하는 방법을 

정리해보도록하겠습니다.

 

 

1. 셀렉트 박스 체인지 이벤트                                              

 

HTML

<select name="cars" id="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="opel">Opel</option>
	<option value="audi">Audi</option>
</select>

 

 

Jquery

$(document).ready(function() { 
	$('#selectID').on('change',function(){
		var x = $(this).val();
		alert(x);
	})
}); 

 

2. 라디오 버튼 체인지 이벤트

 

HTML

<input type="radio" id="kor" name="country">
<input type="radio" id="eng" name="country">

 

 

Jquery

$(document).ready(function(){
	$("input:radio[name=country]").on('change',function(){
		var x =$(this).attr('id');
		alert(x);
	});
});

 

 

3. 체크박스 클릭 이벤트

 

HTML

<input type="checkbox" id="red" name="color" value="Bike">
<label for="red">red</label>
<input type="checkbox" id="blue" name="color" value="Car">
<label for="blue">blue</label>
<input type="checkbox" id="black" name="color" value="Boat">
<label for="black">black</label>

 

 

Jquery

$(document).ready(function(){
	$("input:checkbox[name=color]").on('click',function(){
		var x =$(this).attr('id');
		alert(x);
	});
});

 

 

소스를 짜면서 가장 중요한 건 내가 A라는 목적을 이루기 위해 선행되어야 하는 조건 중 가장 처음은 내가 어떤 행동을 했을때 거기에 맞는 이벤트를 감지해서

내가 원하는 값을 확인하는 건데요.

 

특정 이벤트를 감지하는 방법은 Jquery 말고 여러 가지 방법이 있지만 오늘은 Jquery를 통해 이벤트를 감지하는 방법을 알아보았습니다.

 

 

 

구독하기👍 눌러주시고 자주 놀러와 주세요.

공감 ,댓글⌨은 저에게 큰 힘이 됩니다.

감사합니다.🤗

.

.

.

🙏잘못된 정보의 피드백은 댓글 남겨주세요.🙏



 

 

 

 

반응형

'개발 > javascript&jQuery' 카테고리의 다른 글

[javascript/jQuery] id, name, class 값 가져오기  (12) 2020.03.02