기계는 거짓말하지 않는다

radio 버튼 선택, 값 control 본문

Web/JS

radio 버튼 선택, 값 control

KillinTime 2020. 12. 3. 17:52

JavaScript

var radio = document.getElementById("radio1");	// get element by id
alert(radio.value);	// value 가져오기
alert(radio.id);	// id 가져오기
alert(radio.name);	// name 가져오기

radio = document.getElementsByName("myRadio");	// get elements by name
alert(radio.length);	// radio 개수
alert(radio[0].value);	// radio 첫번째 value
alert(radio[0].id);	// radio 첫번째 id
alert(radio[0].name);	// radio 첫번째 name

radio[4].checked = true;	// 강제 선택

if(document.querySelector("input[name='myRadio']:checked") != null) {
	alert(document.querySelector("input[name='myRadio']:checked").value);	// checked 된 radio value
}
			
var i;
for(i = 0; i < radio.length; i++) {
	if(radio[i].checked == true)	// checked 된 radio value roop로 확인
		alert(radio[i].value);
}

<input type="radio" name="radioName"> radio 선언된 name 이 모두 동일해야 check 중복이 되지 않는다.

 

JQuery

var radio = $("#r1");	// get element by id
alert(radio.val());	// value 가져오기
alert(radio.prop("id"));	// id 가져오기
alert(radio.prop("name"));	// name 가져오기

radio = $("input[name='myRadio']");	// get elements by name
alert(radio.length);	// radio 개수
alert(radio.eq(0).val());	// radio 첫번째 value
alert(radio.eq(0).prop("id"));	// radio 첫번째 id
alert(radio.eq(0).prop("name"));	// radio 첫번째 name

radio.eq(3).prop("checked", true);	// 강제 선택

if($("input[name='myRadio']:checked").val() != null) {
	alert($("input[name='myRadio']:checked").val());	// checked 된 radio value
}

var i;
for(i = 0; i < radio.length; i++) {
	if(radio.eq(i).prop("checked") == true) {	// radio.eq(i).is(":checked") 동일
		alert(radio.eq(i).val());	// checked 된 radio value roop로 확인
    }
}

폼 안의 radio value 는 $("input[name=radioName]:checked", "#formID").val();

 

Test

<body>
	<input type="radio" id="r1" name="myRadio" value="v1"><label for="myRadio" id="label1">radio1</label>
	<input type="radio" id="r2" name="myRadio" value="v2"><label for="myRadio" id="label2">radio2</label>
	<input type="radio" id="r3" name="myRadio" value="v3"><label for="myRadio" id="label3">radio3</label>
	<input type="radio" id="r4" name="myRadio" value="v4"><label for="myRadio" id="label4">radio4</label>
	<input type="radio" id="r5" name="myRadio" value="v5"><label for="myRadio" id="label5">radio5</label>
	<br><a onclick="check()"><b style="font-size:20px; cursor:pointer; text-decoration:underline;">확인</b></a>
	
	<script>
		function check() {
			// JavaScript
			var radio = document.getElementById("r1");	// get element by id
			console.log("JavaScript");
			console.log("radio value: " + radio.value);
			console.log("radio id: " + radio.id);
			console.log("radio name: " + radio.name);
			
			radio = document.getElementsByName("myRadio");	// get elements by name
			console.log("radio length: " + radio.length);
			console.log("radio value: " + radio[0].value);
			console.log("radio id: " + radio[0].id);
			console.log("radio name: " + radio[0].name);
			
			radio[4].checked = true;	// 강제 선택
			
			if(document.querySelector("input[name='myRadio']:checked") != null) {
				console.log("check value: " + document.querySelector("input[name='myRadio']:checked").value);
			}
			
			var i;
			for(i = 0; i < radio.length; i++) {
				if(radio[i].checked == true)
					console.log("roop check value: " + radio[i].value);
			}
			
			// JQuery
			radio = $("#r1");	// get element by id
			console.log("JQuery");
			console.log("radio value: " + radio.val());
			console.log("radio id: " + radio.prop("id"));
			console.log("radio name: " + radio.prop("name"));
			
			radio = $("input[name='myRadio']");		// get elements by name
			console.log("radio length: " + radio.length);
			console.log("radio value: " + radio.eq(0).val());
			console.log("radio id: " + radio.eq(0).prop("id"));
			console.log("radio name: " + radio.eq(0).prop("name"));
			
			radio.eq(3).prop("checked", true);	// 강제 선택
			
			if($("input[name='myRadio']:checked").val() != null) {
				console.log("check value: " + $("input[name='myRadio']:checked").val());
			}
			
			for(i = 0; i < radio.length; i++) {
				if(radio.eq(i).prop("checked") == true)		// radio.eq(i).is(":checked") 동일
					console.log("roop check value: " + radio.eq(i).val());
			}
		}
	</script>
</body>

HTML
Console

'Web > JS' 카테고리의 다른 글

select option 선택, 값 control  (0) 2020.12.03
checkbox 확인, 변경, 강제클릭  (0) 2020.12.02
오브젝트 얻어오기 (getElement)  (0) 2020.12.01
'Web/JS' Related Articles more
Comments