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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 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 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
js自定义事件代码说明
2011/01/31 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
中药学自荐信
2014/06/15 职场文书
住房抵押登记委托书
2014/09/27 职场文书
小升初自荐信范文
2015/03/05 职场文书
学术会议领导致辞
2015/07/29 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers