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 DOM编程艺术笔记
Nov 15 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
一分钟理解js闭包
May 04 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
mocha的时序规则讲解
Feb 16 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
Vue实现动态查询规则生成组件
May 27 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
php json_encode奇怪问题说明
2011/09/27 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python正则表达式介绍
2012/08/06 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python+Wordpress制作小说站
2017/04/14 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python求最大值最小值方法总结
2019/06/25 Python
python实现从wind导入数据
2019/12/03 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
搞笑征婚广告词
2014/03/17 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
党员年度个人总结
2015/02/14 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Python利用folium实现地图可视化
2021/05/23 Python
React更新渲染原理深入分析
2022/12/24 Javascript