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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 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
合作指挥官:孟斯克
2020/03/16 星际争霸
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
OpenCV 边缘检测
2019/07/10 Python
详解Python IO编程
2020/07/24 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Sql面试题
2013/03/20 面试题
医药代表个人求职信范本
2013/12/19 职场文书
农村文化建设标语
2014/10/07 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
让子弹飞观后感
2015/06/11 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android