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 相关文章推荐
用jquery存取照片的具体实现方法
Jun 30 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
select标签设置默认选中的选项方法
Mar 02 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
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
smarty简单入门实例
2014/11/28 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python实现代码统计器
2019/09/19 Python
Python实现图片添加文字
2019/11/26 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
如何完美的建立一个python项目
2020/10/09 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
数控技术应届生求职信
2013/11/13 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
安全宣传标语
2014/06/10 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python