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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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
实现获取http内容的php函数分享
2014/02/16 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
基于Python的关键字监控及告警
2017/07/06 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
事业单位接收函
2014/01/10 职场文书
励志演讲稿800字
2014/08/21 职场文书
机关职员工作检讨书
2014/10/23 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
社区国庆节活动总结
2015/03/23 职场文书
小学运动会通讯稿
2015/07/18 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Python使用Kubernetes API访问集群
2021/05/30 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python