首頁  >  文章  >  web前端  >  javascript動態加入checkbox複選框的方法_javascript技巧

javascript動態加入checkbox複選框的方法_javascript技巧

PHP中文网
PHP中文网原創
2016-05-16 15:24:052308瀏覽

本文實例為大家介紹了javascript如何動態添加checkbox複選框:
在實際應用中可能需要動態的添加複選框,下面就簡單介紹一下如何實現此效果。
單純的建立一個複選框是很容易的,程式碼如下:


var oCheckbox=document.createElement("input");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");


但是這只是創建了一個checkbox對象,但是往往不能夠滿足實際需要,因為在實際應用中,一般會在checkbox複選框前面或者後面有說明性的文字,下面就介紹一下如何實現此效果:
方法就是建立一個checkbox對象,然後再建立一個文字節點,然後再加入p即可。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8">
<title>添加checkbox复选框</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>

以上就是javascript動態加入checkbox複選框的方法_javascript技巧的內容,更多相關內容請關注PHP中文網(www.php.cn)!





陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn