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小括号“()”的多义性
Dec 03 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
使用react+redux实现计数器功能及遇到问题
Jun 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
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
详解php反序列化
2020/06/10 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python能做什么
2020/06/02 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
家具促销活动方案
2014/02/16 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
公司承诺书范文
2014/05/19 职场文书
留守儿童工作方案
2014/06/02 职场文书
国贸专业求职信
2014/06/28 职场文书
初级党校心得体会
2014/09/11 职场文书
群众路线对照检查材料
2014/09/22 职场文书
高三英语教学反思
2016/03/03 职场文书