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语法总结和注意事项小结
Nov 11 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
ES6函数实现排它两种写法解析
May 13 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根据用户语言跳转相应网页
2015/11/04 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python实现的knn算法示例
2018/06/14 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
教师推荐信范文
2013/11/24 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
红色故事演讲稿
2014/05/22 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
2015双创工作总结
2015/07/24 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Python OpenCV 图像平移的实现示例
2021/06/04 Python
浅析NIO系列之TCP
2021/06/15 Java/Android