JavaScript動態新增checkbox核取方塊

admin發表於2017-10-24
JavaScript

在實際應用中可能需要動態的新增核取方塊，下面就簡單介紹一下如何實現此效果。

單純的建立一個核取方塊是很容易的，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var oCheckbox=document.createElement("input");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");

這僅僅是建立一個checkbox物件，但往往不能夠滿足實際需要。

因為在實際應用中，一般會在checkbox核取方塊前面或者後面有說明性的文字，下面就介紹一下如何實現此效果:

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

方法就是建立一個checkbox物件，然後再建立一個文字節點，然後新增到div即可。

相關閱讀:

（1）.document.createElement()參閱document.createElement()方法一章節。

（2）.document.createTextNode()參閱document.createTextNode()方法一章節。

（3）.setAttribute()參閱setAttribute()一章節。

（4）.appendChild()參閱appendChild()一章節。

相關文章