javascript動態(tài)添加checkbox復(fù)選框的方法
更新時間：2015年12月23日 08:45:30 作者：愚蠢的神
這篇文章主要介紹了javascript動態(tài)添加checkbox復(fù)選框的方法的相關(guān)資料,需要的朋友可以參考下
本文實例為大家介紹了javascript如何動態(tài)添加checkbox復(fù)選框:
在實際應(yīng)用中可能需要動態(tài)的添加復(fù)選框，下面就簡單介紹一下如何實現(xiàn)此效果。
單純的創(chuàng)建一個復(fù)選框是很容易的，代碼如下:
var oCheckbox=document.createElement("input");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");
但是這僅僅是是創(chuàng)建了一個checkbox對象，但是往往不能夠滿足實際需要，因為在實際應(yīng)用中，一般會在checkbox復(fù)選框前面或者后面有說明性的文字，下面就介紹一下如何實現(xiàn)此效果:
方法就是創(chuàng)建一個checkbox對象，然后再創(chuàng)建一個文本節(jié)點，然后添加到div即可。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>添加checkbox復(fù)選框</title>
<script type="text/javascript">
var oCheckbox=document.createElement("input");
var myText=document.createTextNode("螞蟻部落");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.appendChild(oCheckbox);
mydiv.appendChild(myText);
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代碼動態(tài)創(chuàng)建了一個checkbox對象，并且后面跟有文字，希望對大家的學(xué)習(xí)javascript有所幫助。
相關(guān)文章
JavaScript 中的相等操作符詳解，包括 [] == []、[] == ![]、{} == !{}幾個操作符,需要的朋友可以參考下2019-12-12
Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。本文將用Three.js實現(xiàn)3D三棱錐立體特效，感興趣的可以了解一下2022-06-06
關(guān)于寫倒計時大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計時這樣寫沒有問題，但是如果是長時間的倒計時，這樣寫就會不準確2019-10-10
Javascript 在瀏覽器中的性能問題，可能是最重要的可用性問題;Js的阻塞性 瀏覽器用單一進程來處理UI進程和Js的執(zhí)行;不管是內(nèi)嵌的還是外鏈的，下載并立即執(zhí)行 因為它有可能會修改頁面2012-12-12
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 函數(shù)表達式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家分享了js窗口震動小程序,可設(shè)置抖動的頻率，范圍，和次數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單評論功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
用js實現(xiàn)輸入提示(自動完成)的實例代碼，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了JavaScript前端實現(xiàn)壓縮圖片功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要給大家介紹了關(guān)于微信小程序瘦身的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05