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