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 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
星际中的相关伤害
2020/03/04 星际争霸
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vuex直接赋值的三种方法总结
2018/09/16 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python图像处理之反色实现方法
2015/05/30 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python多进程间通信代码实例
2019/09/30 Python
python线程池如何使用
2020/05/28 Python
python中的错误如何查看
2020/07/08 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
会计个人实习计划书
2014/08/15 职场文书
2014年行政部工作总结
2014/11/19 职场文书
初中信息技术教学计划
2015/01/22 职场文书
年底个人总结范文
2015/03/10 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS