기술팁 동적으로 생성한 radio, checkbox 가 클릭되지 않을때 November 16, 2005 PHPSchool 에서 JSP님이 질문했던 내용을 해결하다가 예전에 이 문제를 우회해서 해결한 적이 있기에 팁으로 남긴다. 동적으로 생성한 라디오 버튼이나 체크박스가 작동하지 않을때가 있다. 예제 코드는 다음과 같다. 라디오버튼 생성 소스보기위 코드를 저장하고 라디오 버튼을 실행해보면 Firefox(이하 FF)와 Internet Explorer(이하 IE) 의 실행결과가 다른 것을 알 수 있다. 제대로 동작하지 않는 브라우저는 IE이다. setAttribute 로 직접 할당해봐도 결과는 마찬가지... 더욱 이상한 것은 분명 obj.name 이라는 값은 존재한다는 것이다! 검색을 해보다 안되서 MSDN을 뒤졌는데 createElement 항목에서 다음과 같은 코드를 발견했다. (http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createelement.asp) var newRadioButton = document.createElement(""); 이 코드를 보고 설마... 하는 마음에 위의 소스중 createRadio 부분의 첫번째 줄을 다음과 같이 바꿔보았다. var obj = document.createElement(""); 물론 아래쪽에 있는 name과 type을 정의하는 부분은 주석처리해둔 상태다. 결과는...? 성공이다. 그런데 또다른 문제가 생긴 것이 아까는 잘 되던 FF에서 말썽이 일어난 것이다. 그도 그럴 것이 위와 같은 식의 createElement 사용법은 상식을 벗어난 사용이라 타 브라우저에서는 지원하지 않는 것이었다. 최종적으로 원래의 잘되던 코드와 변경한 후의 코드를 서로 호환하기 위해 불법적인 IE에서의 사용을 예외처리 하기로 했다. 완성된 코드는 다음과 같다. function createRadio(name, value) { var obj; try { obj = document.createElement(""); } catch(e) { obj = document.createElement("input"); obj.type = "radio"; obj.name = name; } obj.value = value; document.forms[0].appendChild(obj); } SNS를 통해 이 글을 공유하세요.FacebookLinkedInTwitterTelegramEmail