인터넷정보

동적인 다중 select처럼 => 다중 radio 버턴 (라디오버튼)

알 수 없는 사용자 2008. 2. 4. 11:05
다중 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
반응형