javascript动态添加checkbox复选框的方法


Posted in Javascript onDecember 23, 2015

本文实例为大家介绍了javascript如何动态添加checkbox复选框:
在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果。
单纯的创建一个复选框是很容易的,代码如下:

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

但是这仅仅是是创建了一个checkbox对象,但是往往不能够满足实际需要,因为在实际应用中,一般会在checkbox复选框前面或者后面有说明性的文字,下面就介绍一下如何实现此效果:
方法就是创建一个checkbox对象,然后再创建一个文本节点,然后添加到div即可。

<!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>

以上代码动态创建了一个checkbox对象,并且后面跟有文字,希望对大家的学习javascript有所帮助。

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 #Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 #Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 #Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 #Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 #Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 #Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 #Javascript
You might like
日本十大惊悚动漫
2020/03/04 日漫
DIY实用性框形天线
2021/03/02 无线电
php5.2.0内存管理改进
2007/01/22 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
简单了解python数组的基本操作
2019/11/26 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
pygame实现飞机大战
2020/03/11 Python
基于python检查矩阵计算结果
2020/05/21 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
大学生找工作推荐信范文
2013/11/28 职场文书
初中物理教学反思
2014/01/14 职场文书
教职工代表大会主持词
2014/04/01 职场文书
管理工程专业求职信
2014/08/10 职场文书
技术股份合作协议书
2014/10/05 职场文书
党建工作整改措施
2014/10/28 职场文书
全陪导游词
2015/02/04 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
2019感恩宣传标语!
2019/07/05 职场文书