라디오버튼(Radio Button) 체크박스와 비슷하나 라디오 버튼은 하나만 선택할 수 있다는 특징을 가지고 있습니다.
<input type="radio" name="chk_info" value="HTML">HTML
위의 예제에서 CSS가 기본적으로 선택된채로 출력할려면 checked 속성을 사용하면 됩니다.
<input type="radio" name="chk_info" value="HTML">HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
function checkRadioValue(obj,stype) {
var i, sum=0;
var robj = document.getElementsByName(obj);
for(i=0;i<robj.length;i++){
if(robj[i].checked == true){
sum++;
if(stype == "return") {
return robj[i].value;
} else {
alert(robj[i].value);
}
}
}
if(sum == 0) {
alert("선택이 안되어 있습니다.");
return false;
}
}
function checkRadioView(obj,stype) {
var s = checkRadioValue(obj,stype);
document.getElementById("test").value = s;
}
</script>
<input type="radio" name="radiosample" value="1" />라디오 체크 1
<input type="radio" name="radiosample" value="2" />라디오 체크 2
<input type="radio" name="radiosample" value="3" />라디오 체크 3
<input type="radio" name="radiosample" value="4" />라디오 체크 4
<input type="radio" name="radiosample" value="5" />라디오 체크 5
<br /><br />
<input type="text" name="test" id="test" value="" /><br /><br />
<input type="button" value="라디오버튼 값체크" onclick="checkRadioValue('radiosample','alert');" />
<input type="button" value="라디오버튼 값체크 텍스트필드에 Return" onclick="checkRadioView('radiosample','return');" />
라디오 체크 1 라디오 체크 2 라디오 체크 3 라디오 체크 4 라디오 체크 5
회원 등급별로 다른내용을 보여주거나 회원가입 폼메일 양식등에서 많이사용됩니다.
이벤트시 특정 영역을 숨기고 보여주고 하기위한 기능입니다
<!-- html 시작 -->onclick="div_OnOff(this.value,'con > 회원신청 3
<div id="con
<!-- 스크립트 시작 -->3
JavaScript onchange Event 자바스크립트 onchange 이벤트 input text 내용 변경 감지 소스 코드 [ 편집 ] < input type = "text" value = "hello" onchange = "bgcolor_yellow(this)" />
< input type = "text" value = "world" onchange = "bgcolor_yellow(this)" />
< script >
function bgcolor_yellow ( obj ) {
obj . style . backgroundColor = 'yellow' ;
}
</ script >
→ input text의 내용(hello 또는 world)을 바꾸면 배경색이 노란색으로 바뀐다. 같이 보기 [ 편집 ] 참고 자료 [ 편집 ]