JavaScript动态添加checkbox复选框
分类:实例代码
在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果。
单纯的创建一个复选框是很容易的,代码如下:
var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id","mayi");
这仅仅是创建一个checkbox对象,但往往不能够满足实际需要。
因为在实际应用中,一般会在checkbox复选框前面或者后面有说明性的文字,下面就介绍一下如何实现此效果:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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()一章节。
JavaScript动态添加checkbox复选框,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态添加checkbox复选框就介绍到这了。
JavaScript动态添加checkbox复选框属于前端实例代码,有关更多实例代码大家可以查看。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu