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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
js实现tab切换效果
Feb 16 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php递归json类实例
2014/12/02 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
python中定义结构体的方法
2013/03/04 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
对Python函数设计规范详解
2019/07/19 Python
python3 map函数和filter函数详解
2019/08/26 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
python中有帮助函数吗
2020/06/19 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
电子专业推荐信范文
2013/11/18 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
团员个人年度总结
2015/02/26 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
工作收入证明范本
2015/06/12 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS