radio와 checkBox

 

 

 

Radio

 

버튼을 누르면 선택한 값이 alert으로 뜨고 , "배"가 선택되어 있다

<!-- radio -->
<ul>
	<li><input type="radio" name="radio_test" value="사과" checked="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">
$(function () {
	$("#choice").click(function() {
		//선택된 값 getter
		//let radioVal = $("input[name='radio_test']:checked").val();
		//alert(radioVal);
		
		//setter 클릭하면 "배"로 옮겨가기
		$('input[name="radio_test"]').val(["배"]);
	});
});
</script>

 

 

 

CheckBox

버튼을 누르면 체크된 값이 창으로 뜨고

 

<!-- checkbox -->
<input type="checkbox" id="che1" name="ch">그림그리기
<input type="checkbox" id="che2" name="ch">음악듣기
<input type="checkbox" id="che3" name="ch">영화보기
<br><br>
<button type="button" id="chBtn">체크</button>

<script type="text/javascript">
$("#chBtn").click(function() {
	//getter
	//방법1
	//let check = $("#che1").is(":checked");
	//체크되고 버튼누르면 true;
	//alert("check:"+check);
	
	//방법2
	//let check = $("input:checkbox[id='che1']").is(":checked");
	//alert("check:"+check);
	
	//setter
	$("#che1").prop("checked", true);
});
</script>