function createCheckbox(f) {
var chbx = document.createElement("input");
chbx.setAttribute("type", "checkbox");
chbx.setAttribute("id", "normalone");
chbx.setAttribute("name", "window");
chbx.setAttribute("value","윈도우 프로그램"); //증가
second.appendChild(chbx);
var chbx_text = document.createTextNode("윈도우 프로그램 ");
//chbx_text.setAttribute("name","normalone1");
second.appendChild(chbx_text);
var chbx1 = document.createElement("input");
chbx1.setAttribute("type", "checkbox");
chbx1.setAttribute("id", "normalone");
chbx1.setAttribute("name", "linux"); //증가
chbx1.setAttribute("value","리눅스 프로그램");
second.appendChild(chbx1);
var chbx_text1 = document.createTextNode("리눅스 프로그램 ");
//chbx_text.setAttribute("id","normalone2");
second.appendChild(chbx_text1);
var chbx2 = document.createElement("input");
chbx2.setAttribute("type", "checkbox");
chbx2.setAttribute("id", "normalone");
chbx2.setAttribute("name", "android"); //증가
chbx2.setAttribute("value","안드로이드/iOS 프로그램");
second.appendChild(chbx2);
var chbx_text2 = document.createTextNode("안드로이드/iOS 프로그램 ");
//chbx_text.setAttribute("id","normalone3");
second.appendChild(chbx_text2);
}
저렇게 체크박스들마다 id를 "normalone" 으로 설정을 하였습니다. ' 일반 ' 을 눌렀을 때 나오는 체크박스들 입니다.
function createCheckbox2(f) {
var p_element=document.getElementById(f.normal.value);
second.removeChild(p_element);
var p_element1=document.getElementById(f.normal.value);
second.removeChild(p_element1);
var p_element2=document.getElementById(f.normal.value);
second.removeChild(p_element2);
// 체크박스 생성
var chbx3 = document.createElement("input");
chbx3.setAttribute("type", "checkbox");
chbx3.setAttribute("id", "webone");
chbx3.setAttribute("name", "jsp");
chbx3.setAttribute("value","JSP/Servlet"); //증가
second.appendChild(chbx3);
var chbx_text3 = document.createTextNode("JSP/Servlet ");
second.appendChild(chbx_text3);
var chbx4 = document.createElement("input");
chbx4.setAttribute("type", "checkbox");
chbx4.setAttribute("id", "webone");
chbx4.setAttribute("name", "asp"); //증가
chbx4.setAttribute("value","ASP/ASP.NET");
second.appendChild(chbx4);
var chbx_text4 = document.createTextNode("ASP/ASP.NET ");
second.appendChild(chbx_text4);
var chbx5 = document.createElement("input");
chbx5.setAttribute("type", "checkbox");
chbx5.setAttribute("id", "webone");
chbx5.setAttribute("name", "php"); //증가
chbx5.setAttribute("value","PHP");
second.appendChild(chbx5);
var chbx_text5 = document.createTextNode("PHP ");
second.appendChild(chbx_text5);
}
이렇게 ' 웹 '을 클릭했을 때 나오는 체크박스들은 id가 "webone" 입니다.
<td id="first"><input type="radio" name="normal" value="webone" onclick="createCheckbox(this.form)">일반
<input type="radio" name="normal" value="normalone" onclick="createCheckbox2(this.form)">웹
</td>
일반을 클릭했을 때는 맨 위에있는 function 부분이 , 웹을 클릭했을 때는 2번째 function이 실행됩니다.
먼저 주목하셔야 할 부분은
var p_element=document.getElementById(f.normal.value);
second.removeChild(p_element);
var p_element1=document.getElementById(f.normal.value);
second.removeChild(p_element1);
var p_element2=document.getElementById(f.normal.value);
second.removeChild(p_element2);
인데요, this.form을 createdCheckbox(f)로 가져온 후에 일반과 웹 라디오 버튼에 설정해둔 밸류를 가져와서 지워버립니다.
지금은 웹을 선택 시에 일반 탭에 있는 체크박스 만 지워지구요..
결론적으로는, 체크박스들은 모두 지워지는데 그 옆에있는 TextNode들이 지워지지가 않네요...
어떡해야 하죠?
