다중 select처럼 작동하는 radio 입니다.
Q&A에 질문이 있길래 검색해서 비슷한 걸 찾았습니다.
원본은 http://rawlinson.us/blog/documents/jsradio.html 에서 퍼왔고
그 페이지의 "this link "라는 걸 클릭하면 radio버턴이 나타날 겁니다.
원본을 약간 수정해서 테스트 했습니다.
수정 내용은 <UL> <LI> 동적 생성하던 부분 제거했습니다.
그리고 동적 생성된 radio의 checked도 가능하게 추가했습니다.
---------------------=---------------------------
<html>
<body>
<FORM METHOD=POST ACTION="">
<INPUT TYPE="radio" NAME="bbs_type" value='norm' onclick="return drawRadios('norm','no');">일반형</INPUT>
<INPUT TYPE="radio" NAME="bbs_type" value='norm' onclick="return drawRadios('lect','outer_level');">강좌형</INPUT>
<INPUT TYPE="radio" NAME="bbs_type" value='norm' onclick="return drawRadios('forum','no');">포럼형</INPUT>
<hr>
<div id="nextRdio"></div>
<INPUT TYPE="submit">
</FORM>
</body>
<script>
function getStyleObject(objectId) {
var theObject = null;
// cross-browser function to get an object given its id
if(document.getElementById && document.getElementById(objectId)) // W3C DOM
theObject= document.getElementById(objectId);
else if (document.all && document.all(objectId)) // MSIE 4 DOM
theObject= document.all(objectId);
else if (document.layers && document.layers[objectId]) // NN 4 DOM.. note: this won't find nested layers
theObject = document.layers[objectId];
else
theObject=false;
return theObject;
}
// 인수 checked는 두번째 radio 배열의 key값 중에 하나를 사용하며
// key값과 같은 값을 주면 그 radio를 체크상태로 초기화 할 수 있다
function drawRadios(bbs_type,checked){
var MENT_TYPES={
'norm':['no','inner_norm','inner_level','outer_norm','outer_level'],
'lect':['no','outer_norm','outer_level'],
'forum':['no']
};
var ment_name={
'no':'사용안함',
'inner_norm':'내장일반',
'inner_level':'내장계층',
'outer_norm':'외부일반',
'outer_level':'외부계층'
};
var ment_type= MENT_TYPES[bbs_type];
var p = getStyleObject("nextRdio");
var ul = document.createElement('ul');
p.innerHTML =''; // child를 다지운다
ul.style.display='inline-block';//'block';
// p.appendChild(ul);
for(var i=0;i<ment_type.length;i++){
// li = document.createElement('li');
// ul.appendChild(li);
// try/catch: try works in IE 6 (maybe 7) catch works in ff/ns browsers
// however, no error is thrown in opera 8 (in the try), but no radio is drawn in opera 8 either.
try{
rdo = document.createElement('<input type="radio" name="ment_type" />');
}catch(err){
rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','ment_type');
}
rdo.id = 'ment_type'+i;
rdo.value = ment_type[i];
lbl = document.createElement('label');
// set the label in IE..
lbl.setAttribute('htmlFor', rdo.id);
// set the label for other browsers
lbl.setAttribute('for', rdo.id);
var tn = document.createTextNode(ment_name[ment_type[i]]+' ');
lbl.appendChild(tn);
p.appendChild(rdo);
p.appendChild(lbl);
if (checked==rdo.value)
rdo.checked = true;
}
return true;
}
</script>
</body>
출처:PHPSCHOOL
Q&A에 질문이 있길래 검색해서 비슷한 걸 찾았습니다.
원본은 http://rawlinson.us/blog/documents/jsradio.html 에서 퍼왔고
그 페이지의 "this link "라는 걸 클릭하면 radio버턴이 나타날 겁니다.
원본을 약간 수정해서 테스트 했습니다.
수정 내용은 <UL> <LI> 동적 생성하던 부분 제거했습니다.
그리고 동적 생성된 radio의 checked도 가능하게 추가했습니다.
---------------------=---------------------------
<html>
<body>
<FORM METHOD=POST ACTION="">
<INPUT TYPE="radio" NAME="bbs_type" value='norm' onclick="return drawRadios('norm','no');">일반형</INPUT>
<INPUT TYPE="radio" NAME="bbs_type" value='norm' onclick="return drawRadios('lect','outer_level');">강좌형</INPUT>
<INPUT TYPE="radio" NAME="bbs_type" value='norm' onclick="return drawRadios('forum','no');">포럼형</INPUT>
<hr>
<div id="nextRdio"></div>
<INPUT TYPE="submit">
</FORM>
</body>
<script>
function getStyleObject(objectId) {
var theObject = null;
// cross-browser function to get an object given its id
if(document.getElementById && document.getElementById(objectId)) // W3C DOM
theObject= document.getElementById(objectId);
else if (document.all && document.all(objectId)) // MSIE 4 DOM
theObject= document.all(objectId);
else if (document.layers && document.layers[objectId]) // NN 4 DOM.. note: this won't find nested layers
theObject = document.layers[objectId];
else
theObject=false;
return theObject;
}
// 인수 checked는 두번째 radio 배열의 key값 중에 하나를 사용하며
// key값과 같은 값을 주면 그 radio를 체크상태로 초기화 할 수 있다
function drawRadios(bbs_type,checked){
var MENT_TYPES={
'norm':['no','inner_norm','inner_level','outer_norm','outer_level'],
'lect':['no','outer_norm','outer_level'],
'forum':['no']
};
var ment_name={
'no':'사용안함',
'inner_norm':'내장일반',
'inner_level':'내장계층',
'outer_norm':'외부일반',
'outer_level':'외부계층'
};
var ment_type= MENT_TYPES[bbs_type];
var p = getStyleObject("nextRdio");
var ul = document.createElement('ul');
p.innerHTML =''; // child를 다지운다
ul.style.display='inline-block';//'block';
// p.appendChild(ul);
for(var i=0;i<ment_type.length;i++){
// li = document.createElement('li');
// ul.appendChild(li);
// try/catch: try works in IE 6 (maybe 7) catch works in ff/ns browsers
// however, no error is thrown in opera 8 (in the try), but no radio is drawn in opera 8 either.
try{
rdo = document.createElement('<input type="radio" name="ment_type" />');
}catch(err){
rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','ment_type');
}
rdo.id = 'ment_type'+i;
rdo.value = ment_type[i];
lbl = document.createElement('label');
// set the label in IE..
lbl.setAttribute('htmlFor', rdo.id);
// set the label for other browsers
lbl.setAttribute('for', rdo.id);
var tn = document.createTextNode(ment_name[ment_type[i]]+' ');
lbl.appendChild(tn);
p.appendChild(rdo);
p.appendChild(lbl);
if (checked==rdo.value)
rdo.checked = true;
}
return true;
}
</script>
</body>
출처:PHPSCHOOL
반응형
'인터넷정보' 카테고리의 다른 글
| [스크립트] [펌] 체크박스형으로 디자인 된 멀티 select (0) | 2008.02.04 |
|---|---|
| [스크립트] css 로 선언한 값을 객체에서 알아오기 (0) | 2008.02.04 |
| [스크립트] css 로 선언한 값을 객체에서 알아오기 (0) | 2008.02.04 |
| [보안] 중국아이피 80번포트 막기..페도라코어6버전 iptables 설정 (0) | 2008.02.04 |
| [보안] 중국아이피 80번포트 막기..페도라코어6버전 iptables 설정 (0) | 2008.02.04 |
| 동적인 다중 select처럼 => 다중 radio 버턴 (라디오버튼) (0) | 2008.02.04 |
| MS MVP의 IE7 완벽 단축키 63개 (0) | 2008.02.03 |
| MS MVP의 IE7 완벽 단축키 63개 (0) | 2008.02.03 |
| 알아두면 편리한 자판 단축키들(웹서핑용) (0) | 2008.01.05 |
| 알아두면 편리한 자판 단축키들(웹서핑용) (0) | 2008.01.05 |