[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시

button tag 접근 예시

<button type="button" id="btn1">클릭</button>
<button type="button" id="btn2">클릭</button>
<button type="button" id="btn3">클릭</button>

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">

$("button").click(function () {
	alert("태그명으로 버튼 클릭");
});
$("#btn1").click(function () {
	alert("id명으로 버튼 클릭");
});
$("#btn2").on("click", function (){
	alert("[on함수이용] id명으로 버튼 클릭 ");
});

$("#btn3").click(btnProc);
function btnProc() {
	alert("[btnProc] id명으로 버튼 클릭");
}
</script>

 

설명

button을 디자인할 때 class를 사용한다. 이벤트는 id로 처리한다.

 

click(function () : 클릭 시 function ()를 실행한다.

on("click", function ()) : on()함수 이용, 클릭 시 function ()를 실행한다.

click(btnProc); : 클릭시 btnProc() 함수를 실행한다.

---

<input type="radio"> 접근 예시

<ul>
	<li><input type="radio" name="radioTest" value="apple" checked="checked">사과</li>
	<li><input type="radio" name="radioTest" value="pear">배</li>
	<li><input type="radio" name="radioTest" value="orange">오렌지</li>
</ul>

<button type="button" id="choice">선택</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#choice").click(function() {
		let rVal = $("input[name='radioTest']:checked").val();
		alert(rVal);
		
		$("input[name='radioTest']").val(["orange"]);
	});
});
</script>

 

설명

setter

$("input[name='radioTest']").val(["orange"]); : 버튼을 누르면 orange가 선택되어진다.

getter

$("input[name='radioTest']:checked").val() : 체크된 값을 가져온다.

---

<input type="checkbox"> 접근 예시

<input type="checkbox" id="ch">그림그리기
<br><br>
<button type="button" id="btn">체크</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	$("#btn").click(function() {
		let check = $("#ch").is(":checked");
		// 위와 동일
//		let check = $("input:checkbox[id='ch']").is(":checked");	
		alert(check);
		

		$("#ch").attr("checked", "checked");
		// 위와 동일    
//		$("#ch").prop("checked", true);
	});
});


</script>

 

설명

checkbox  독립적이다(다 골를 수도 있고 하나만 고를 수도 있다 / radio와 다른 점)

setter

$("#ch").attr("checked", "checked")

$("#ch").prop("checked", true)

둘 다 실행결과는 동일하다. 체크박스를 체크해준다.

getter

$("#ch").is(":checked")

$("input:checkbox[id='ch']").is(":checked")

둘 다 실행결과는 동일하다. 체크박스가 체크가 되어있으면 true, 체크되지 않으면 false를 반환한다.