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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
javascript计时器详解
Feb 28 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
node使用request请求的方法
Dec 20 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开发入门教程之面向对象
2006/12/05 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
jquery uaMatch源代码
2011/02/14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
shiro授权的实现原理
2017/09/21 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Python 开发Activex组件方法
2009/11/08 Python
python类装饰器用法实例
2015/06/04 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
判断网页编码的方法python版
2016/08/12 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
小学生安全演讲稿
2014/04/25 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
借条如何写
2015/05/26 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
python 自动刷新网页的两种方法
2021/04/20 Python
如何用Navicat操作MySQL
2021/05/12 MySQL