Js動態(tài)添加復(fù)選框Checkbox的實例方法
首先，使用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é)點，放在checkbox后面。
如下代碼，程序產(chǎn)生了一個checkbox和一個文本節(jié)點，并將它們放到一個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)文章
我們在做小程序支付相關(guān)的開發(fā)時,總會遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序調(diào)用支付接口的完整流程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
本文給大家分享的是使用javascript實現(xiàn)判斷微信版本號以及判斷是否在內(nèi)置的微信瀏覽器中打開的代碼，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05
js每隔5分鐘執(zhí)行一次ajax請求的實現(xiàn)方法
每隔5分鐘執(zhí)行一次ajax請求，如何實現(xiàn)？下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
JavaScript基本語法_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript基本語法，適合剛?cè)腴T的同學(xué)，有興趣的可以了解下。2017-06-06
JavaScript內(nèi)置對象之Array的使用小結(jié)
這篇文章主要介紹了JavaScript內(nèi)置對象之Array的使用小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JS分成三個大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來寫一個更加復(fù)雜的有交互式的頁面,還需要WebAPI的支持，相當(dāng)于把后端編程實現(xiàn)成前端交互。DOM+BOM就組成了WebAPI2022-06-06
JavaScript?新提案optional?chaining可選鏈屬性原理詳解
這篇文章主要為大家介紹了JavaScript?新提案optional?chaining可選鏈屬性原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
javascript 數(shù)組排序函數(shù)sort和reverse使用介紹
reverse方法將一個Array對象中的元素位置進行反轉(zhuǎn)，sort方法返回一個元素已經(jīng)進行了排序的 Array 對象，下面為大家介紹下2013-11-11
如何讓復(fù)選框只能選擇一項，實現(xiàn)的方法有很多，在本文為大家詳細(xì)介紹下，有此需求的朋友可以參考下2013-10-10
JS控制只能輸入數(shù)字并且最多允許小數(shù)點兩位
這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點兩位,本文給大家提到j(luò)s如何限制input輸入框只能輸入數(shù)字問題，需要的朋友可以參考下2019-11-11