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开发包大全整理
Dec 22 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JavaScript实现图片伪异步上传过程解析
Apr 10 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禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
python设置检查点简单实现代码
2014/07/01 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python自省及反射原理实例详解
2020/07/06 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
精彩的演讲稿开头
2014/05/08 职场文书
2014年生产部工作总结
2014/12/17 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
教师创先争优承诺书
2015/04/27 职场文书
三八节活动简报
2015/07/20 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
详解pytorch创建tensor函数
2022/03/22 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers