Js でチェックボックスを動的に追加 チェックボックス インスタンス メソッド_JavaScript スキル

まず、JS を使用してチェックボックスを動的に生成するには、次のようなステートメントを使用できます。

コードをコピーしますコードは次のとおりです:

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( "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{ margin: 0px;

padding:0px;

list-style-type:none;
vertical-align:middle ;
}

#executerDiv li{
float:left;
表示:ブロック;

幅:100px;
高さ:20px;
行の高さ:20px;

フォントサイズ:14px;
フォントの太さ:太字;
カラー:#666666;

テキストの装飾: なし;
テキストの配置:左;

背景:#ffffff;
}