Js는 체크박스를 동적으로 추가합니다. 체크박스 인스턴스 method_javascript 기술

먼저 JS를 사용하여 Checkbox를 동적으로 생성하면 다음과 유사한 명령문을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다:

var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute(" id",'123456');

단, 이렇게 생성된 체크박스에는 후행 텍스트가 없습니다. 추가해야 하는 경우
document.createTextNode를 사용해야 합니다. ('XXX')
텍스트 노드를 생성하는 메소드, 체크박스 뒤에 배치됩니다.

다음 코드에서는 프로그램이 체크박스와 텍스트 노드를 생성하고 이를 li 개체에 넣은 다음 li 개체를 ul 개체에 추가합니다.

코드 복사 코드는 다음과 같습니다.

varexecuterDiv=$("executerDiv");
executerDiv.innerHTML="";
var ul= document.createElement("ul");

for(var i=0;i var arr=tableDatas[i];

// 체크박스 추가
var checkBox=document.createElement( "input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",arr[0]);
checkBox.setAttribute("name" , arr [1]);

var li=document.createElement("li");
li.appendChild(checkBox);
li.appendChild(document.createTextNode(arr[1] )) ;

ul.appendChild(li);


위 코드에서 li과 ul에 체크박스를 넣으면 좋은 정렬 효과를 얻을 수 있습니다. UL과 li에서 설정한 CSS 스타일은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. #executerDiv{ }

#executerDiv ul{
여백: 0px;
패딩:0px;
목록 스타일 유형:없음;
수직 정렬:중간 ;
}

#executerDiv li{
float:왼쪽;
디스플레이:블록;

너비:100px;
높이:20px;
줄 높이:20px;

글꼴 크기:14px;
글꼴- 두께:굵게;
색상:#666666;

텍스트 장식:없음;
텍스트 정렬:왼쪽;

배경:#ffffff;
}