본문 바로가기

카테고리 없음

6️⃣ 제이 쿼리 - Radio 선택 버튼으로 변경, Checkbox 버튼으로 활성화

by Meteora_ 2021. 3. 8.
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<!-- radio -->
<ul>
	<li><input type="radio" name="radio_test" value="사과" checked>사과</li>
	<li><input type="radio" name="radio_test" value="배">배</li>
	<li><input type="radio" name="radio_test" value="바나나">바나나</li>
</ul>

<button type="button" id="choice">선택</button>

<script type="text/javascript">
$(document).ready(function() {
	
	$("#choice").click(function () {
		// getter
	//	var radioVal = $("input[name='radio_test']:checked").val();
	//	alert(radioVal);
		
		// setter
		$("input[name='radio_test']").val(["바나나"]);
		
	});	
});
</script>

<br><br>

<!-- checkbox -->
<input type="checkbox" id="ch">그림 그리기
<br><br>
<button type="button" id="btn">첵크</button>

<script type="text/javascript">
$(function () {
	
	$("#btn").click(function () {
		
		// getter
	//	let check = $("#ch").is(":checked");
	//	let check = $("input:checkbox[id='ch']").is(":checked");
	// 	alert("check:" + check);
		
		// setter
		$("#ch").prop("checked", true);
		
	});
});
</script>





</body>
</html>

댓글