脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript动态添加checkbox复选框

javascript动态添加checkbox复选框的方法

 更新时间：2015年12月23日 08:45:30   作者：愚蠢的神  
这篇文章主要介绍了javascript动态添加checkbox复选框的方法的相关资料,需要的朋友可以参考下

本文实例为大家介绍了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有所帮助。

您可能感兴趣的文章:

相关文章

  • JS转换HTML转义符的方法

    JS转换HTML转义符的方法

    下面小编就为大家带来一篇JS转换HTML转义符的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript实现图片懒加载与预加载的代码详解

    JavaScript实现图片懒加载与预加载的代码详解

    图片懒加载与预加载是前端优化中比较常见的方法,也是前端面试中会被问到的问题,如果不做懒加载和预加载,浏览器的回流重绘很快,而图片的加载是需要发送网络请求的,一次性发很多请求就会导致网络的堵塞,影响用户体验,接下来就让我们来实现一下懒加载以及预加载的效果
    2025-03-03
  • JavaScript使用DeviceOne开发实战（一) 配置和起步

    JavaScript使用DeviceOne开发实战（一) 配置和起步

    这篇文章主要介绍了JavaScript使用DeviceOne开发实战（一) 配置和起步的相关资料,需要的朋友可以参考下
    2015-12-12
  • 微信小程序实现左侧滑动导航栏

    微信小程序实现左侧滑动导航栏

    这篇文章主要为大家详细介绍了微信小程序实现左侧滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • javascript 判断字符串是否包含某字符串及indexOf使用示例

    javascript 判断字符串是否包含某字符串及indexOf使用示例

    js javascript 判断字符串是否包含某字符串,String对象中查找子字符及indexOf具体使用，感兴趣的朋友可以参考下
    2013-10-10
  • Java/JS获取flash高宽的具体方法

    Java/JS获取flash高宽的具体方法

    本文为大家详细介绍下使用Java/JS如何获取flash的高宽，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-12-12
  • JS简单去除数组中重复项的方法

    JS简单去除数组中重复项的方法

    这篇文章主要介绍了JS简单去除数组中重复项的方法,涉及javascript针对数组的遍历、判断与运算相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • javascript封装的sqlite操作类实例

    javascript封装的sqlite操作类实例

    这篇文章主要介绍了javascript封装的sqlite操作类,可实现SQLite数据库的初始化及执行SQL语句的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS中的数组的sort方法使用示例

    JS中的数组的sort方法使用示例

    sort会调用每一项的toString方法进行比较，下面为大家介绍下JS中数组sort方法的具体使用
    2014-01-01
  • 前端实现无感刷新的详细方案

    前端实现无感刷新的详细方案

    无感刷新（Silent Refresh）是指在用户无感知的情况下,通过技术手段自动更新身份凭证（如Token）,维持用户登录状态的技术方案,本文给大家介绍了前端实现无感刷新的详细方案,需要的朋友可以参考下
    2025-03-03

最新评论