JavaScript動態建立checkbox核取方塊

antzone發表於2017-03-15
JavaScript

可以利用JavaScript動態建立一個checkbox核取方塊，並且將其設定為選中狀態。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    var chk=document.createElement("input"); 
    chk.setAttribute("type","checkbox"); 
    chk.setAttribute("checked",true); 
    document.body.appendChild(chk); 
  }
}
</script> 
</head> 
<body>
<input type="button" id="bt" value="新增核取方塊"/>
</body> 
</html>

以上程式碼在IE8和IE8以上瀏覽器或者其他標準瀏覽器中沒有任何問題，都能夠建立一個核取方塊，並將其設定為選中狀態，但是在IE8以下只能夠建立核取方塊，不能夠將其設定為選中狀態，解決方案如下：

[JavaScript] 純文字檢視 複製程式碼
document.body.appendChild(chk);
chk.setAttribute("checked",true);

只要將兩者的位置顛倒以下就可以相容所有瀏覽器了。

相關文章