Web-Programming/Javascript
[자바스크립트] 동적-라디오 버튼 예제
동적-라디오 버튼 예제
<html>
<body>
<FORM METHOD=POST ACTION="/lib/form_check/echo_post_var.php3">
<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>
'Web-Programming > Javascript' 카테고리의 다른 글
| [ 자바스크립트 / javascript / 아이프레임 / 파이어폭스 / IE / 크롬] iframe auto resize - 아이프레임 리사이즈 (1) | 2011.11.21 |
|---|---|
| [ javascript / 자바스크립트 ] F5, 새로고침 , Ctrl + R, Ctrl + N, 방지, 막기, 금지 (0) | 2011.11.15 |
| [ DOM / BOM ] HTML 객체 모델 차이 (1) | 2011.09.28 |
| [Javascript] 자바스크립트 기초,초급 (0) | 2011.08.31 |
| 스크롤 따라 움직이는 레이어 (0) | 2011.02.26 |
| 시작페이지, 즐겨찾기 버튼 만들기 (0) | 2010.05.26 |
| JAVASCRIPT-자바스크립트 : 경고창이나 대화상자 없이 window.close() 시킬 수 있는 방법입니다. ㅎ (0) | 2010.05.15 |
| JAVASCRIPT : 자바스크립트 쿠키를 구워보자!!!ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ (0) | 2010.05.14 |
| opener.loaction.reload(); 부모창 새로고침 (0) | 2010.04.07 |
| document.body.scrollTop ? document.documentElement.scrollTop ! (0) | 2010.04.01 |
댓글