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 ul标签下拉菜单演示代码
Dec 11 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
搞定immutable.js详细说明
May 02 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php 删除cookie方法详解
2014/12/01 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
常见python正则用法的简单实例
2016/06/21 Python
Python函数的周期性执行实现方法
2016/08/13 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
党校培训自我鉴定
2014/02/01 职场文书
计算机专业自荐信
2014/05/24 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
MySQL快速插入一亿测试数据
2021/06/23 MySQL