라디오 버튼 정리

라디오버튼(Radio Button)

체크박스와 비슷하나 라디오 버튼은 하나만 선택할 수 있다는 특징을 가지고 있습니다. <input type="radio" name="chk_info" value="HTML">HTML <input type="radio" name="chk_info" value="CSS">CSS <input type="radio" name="chk_info" value="웹디자인">웹디자인 HTML CSS 웹디자인 위의 예제에서 CSS가 기본적으로 선택된채로 출력할려면 checked 속성을 사용하면 됩니다. <input type="radio" name="chk_info" value="HTML">HTML <input type="radio" name="chk_info" value="CSS" checked="checked">CSS <input type="radio" name="chk_info" value="웹디자인">웹디자인 HTML CSS 웹디자인

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 



 

[JavaScript] 라디오 버튼 클릭시 div 숨김 보임 스크립트 (회원가입 or 폼메일)

2009.07.15 19:07

Posted in ☆Develpoer/└ HTML/Script by duraboys

 

회원 등급별로 다른내용을 보여주거나 회원가입 폼메일 양식등에서 많이사용됩니다.

이벤트시 특정 영역을 숨기고 보여주고 하기위한 기능입니다

<!-- html 시작 -->
<input type="radio" name="test" value="1" onclick="div_OnOff(this.value,'con');"> 회원신청 
<input type="radio" name="test" value="2" onclick="div_OnOff(this.value,'con');"> 준회원 
<input type="radio" name="test" value="3" onclick="div_OnOff(this.value,'con');"> 정회원

<div id="con" style="display:none">
 내용
</div>
<!-- html 끝 -->

<!-- 스크립트 시작 -->
<script>
function div_OnOff(v,id){
 // 라디오 버튼 value 값 조건 비교
 if(v == "3"){
  document.getElementById(id).style.display = ""; // 보여줌
 }else{
  document.getElementById(id).style.display = "none"; // 숨김
 }
}
</script>
<!-- 스크립트 끝 -->

개요[편집]

JavaScript onchange Event

자바스크립트 onchange 이벤트

input text 내용 변경 감지

• jQuery change 이벤트의 JavaScript 판
• 예제: http://zetawiki.com/ex/js/event/onchange.php

소스 코드[편집]

<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)을 바꾸면 배경색이 노란색으로 바뀐다.

같이 보기[편집]

• 자바스크립트 onclick 이벤트
• jQuery change 이벤트
• input text
• 자바스크립트 이벤트

참고 자료[편집]

• http://www.w3schools.com/jsref/event_onchange.asp