Js動態(tài)添加復(fù)選框Checkbox的實(shí)例方法
首先，使用JS動態(tài)產(chǎn)生Checkbox可以采用如下類似的語句：
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",'123456');
但是，這樣產(chǎn)生的checkbox是不帶尾后的文字的，如果需要添加，那么需要使用
document.createTextNode('XXX')
方法來產(chǎn)生一個文本節(jié)點(diǎn)，放在checkbox后面。
如下代碼，程序產(chǎn)生了一個checkbox和一個文本節(jié)點(diǎn)，并將它們放到一個li對象中，再將li對象添加到ul對象中：
var executerDiv=$("executerDiv");
executerDiv.innerHTML="";
var ul=document.createElement("ul");
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
// 加入復(fù)選框
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);
}
executerDiv.appendChild(ul);
以上代碼中，將checkbox放到li和ul中，這樣能起到良好的排列效果，UL和li設(shè)置的CSS樣式如下：
#executerDiv{
}
#executerDiv ul{
margin:0px;
padding:0px;
list-style-type:none;
vertical-align:middle ;
}
#executerDiv li{
float:left;
display:block;
width:100px;
height:20px;
line-height:20px;
font-size:14px;
font-weight:bold;
color:#666666;
text-decoration:none;
text-align:left;
background:#ffffff;
}
相關(guān)文章
JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動畫
這篇文章主要介紹了JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動畫,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
微信小程序利用button控制條件標(biāo)簽的變量問題
這篇文章主要介紹了微信小程序利用button控制條件標(biāo)簽的變量問題，本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-03-03
這篇文章主要介紹了JS中常用的輸出方式(五種)的相關(guān)資料，非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
本文介紹了JavaScript中的this關(guān)鍵詞指向，this是JavaScript的一個關(guān)鍵字，他是函數(shù)執(zhí)行過程中，自動生成的一個內(nèi)部對象，指當(dāng)前的對象，只在當(dāng)前函數(shù)內(nèi)部使用，更多相關(guān)資料需要的小伙伴可以參考下面文章內(nèi)容2022-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)聊天對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
文章介紹了在純前端JavaScript中如何讀取和寫入本地文件,瀏覽器環(huán)境限制了直接訪問文件系統(tǒng),但提供了文件上傳和下載功能,對于文件讀取,可以使用FileReader?API,支持分片讀取和流式處理,感興趣的朋友一起看看吧2025-03-03
微信小程序跨頁面?zhèn)鬟fdata數(shù)據(jù)方法解析
這篇文章主要介紹了微信小程序跨頁面?zhèn)鬟fdata數(shù)據(jù)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
基于JS+HTML實(shí)現(xiàn)彈窗提示是否確認(rèn)提交功能
這篇文章主要介紹了基于JS+HTML實(shí)現(xiàn)彈窗提示是否確認(rèn)提交功能,需要的朋友可以參考下2020-06-06
最近做一個項目，需要javascript動態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個小時的原因竟然是自己手賤，這個最后再說2012-02-02
封裝好的省市地區(qū)聯(lián)動控件附下載...2007-08-08