폼요소 - 라디오 버튼(radio button)
작성자 : 최고의하루
등록날짜 : 2008.12.19 12:03
1,877
라디오 버튼(radio button)
라디오 구성요소는 토글 체크박스와 매우 흡사한 구성과 기능을 가지고 있으나 하나 또는 그 이상의 라디오 버튼이 하나의 그룹을 형성하며, 그룹 내에서 오직 한 버튼만 선택될 수 있다는 것이 차이점이다. 다음은 radio 구성요소에 포함된 속성들과 메소드를 간략히 설명한 것이다.
checked 속성: 현재 라디오 요소가 체크되었는지의 상태
defaultChecked 속성: 현재 라디오 요소의 초기 체크여부 상태
index 속성: 현재 선택된 라디오 버튼의 그룹 내 순번
length 속성: 한 그룹 내의 라디오 버튼의 개수
name 속성: INPUT 태그 내에서 정의된 요소의 이름
value 속성: INPUT 태그 내에서 정의된 요소의 값
click() 메소드: radio 버튼을 클릭한 이벤트를 emulation
예) <HTML>
<HEAD>
<TITLE>radio 버튼 예제</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form) {
if (form.action[1].checked) {
form.result.value = Math.max(form.entry_1.value, form.entry_2.value);
} else {
form.result.value = Math.min(form.entry_1.value, form.entry_2.value);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=post>
숫자_1:
<INPUT TYPE="text" NAME="entry_1" VALUE=0 onChange="calculate(this.form);">
숫자_2:
<INPUT TYPE="text" NAME="entry_2" VALUE=0 onChange="calculate(this.form);">
<BR>
선택:
<BR>
<INPUT TYPE="radio" NAME="action" VALUE="max" onClick="calculate(this. form);">
큰 수
<BR>
<INPUT TYPE="radio" NAME="action" VALUE="min" onClick="calculate(this. form);">
작은 수
<BR>
결과: <INPUT TYPE="text" NAME="result" VALUE=0>
</FORM>
</BODY>
</HTML>
☞ calculate() 함수 내에서는 자바스크립트 내장 객체인 Math 객체가 지원하는 max()와 min() 메소드를 사용하여 계산하였다.
라디오 구성요소는 토글 체크박스와 매우 흡사한 구성과 기능을 가지고 있으나 하나 또는 그 이상의 라디오 버튼이 하나의 그룹을 형성하며, 그룹 내에서 오직 한 버튼만 선택될 수 있다는 것이 차이점이다. 다음은 radio 구성요소에 포함된 속성들과 메소드를 간략히 설명한 것이다.
checked 속성: 현재 라디오 요소가 체크되었는지의 상태
defaultChecked 속성: 현재 라디오 요소의 초기 체크여부 상태
index 속성: 현재 선택된 라디오 버튼의 그룹 내 순번
length 속성: 한 그룹 내의 라디오 버튼의 개수
name 속성: INPUT 태그 내에서 정의된 요소의 이름
value 속성: INPUT 태그 내에서 정의된 요소의 값
click() 메소드: radio 버튼을 클릭한 이벤트를 emulation
예) <HTML>
<HEAD>
<TITLE>radio 버튼 예제</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form) {
if (form.action[1].checked) {
form.result.value = Math.max(form.entry_1.value, form.entry_2.value);
} else {
form.result.value = Math.min(form.entry_1.value, form.entry_2.value);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=post>
숫자_1:
<INPUT TYPE="text" NAME="entry_1" VALUE=0 onChange="calculate(this.form);">
숫자_2:
<INPUT TYPE="text" NAME="entry_2" VALUE=0 onChange="calculate(this.form);">
<BR>
선택:
<BR>
<INPUT TYPE="radio" NAME="action" VALUE="max" onClick="calculate(this. form);">
큰 수
<BR>
<INPUT TYPE="radio" NAME="action" VALUE="min" onClick="calculate(this. form);">
작은 수
<BR>
결과: <INPUT TYPE="text" NAME="result" VALUE=0>
</FORM>
</BODY>
</HTML>
☞ calculate() 함수 내에서는 자바스크립트 내장 객체인 Math 객체가 지원하는 max()와 min() 메소드를 사용하여 계산하였다.
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
