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">
<meta name="author" content="http://www.softwhy.com/" />
<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对象,并且后面跟有文字。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8200

更多内容可以参阅:http://www.softwhy.com/javascript/

时间: 2024-10-13 11:45:00

javascript如何动态添加checkbox复选框的相关文章

通过编写串口助手工具学习MFC过程&mdash;&mdash;(五)添加CheckBox复选框

通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个串口助手再次熟悉一下MFC,并做了一下记录,以便方便以后查阅.做的过程中多是遇到问题直接百度和谷歌搜索来的,所以很多都是不求甚解,知其然不知其所以然.另外做此工具只是为了熟悉了解,许多功能还没有完善!(开发工具VS2008) (五)添加CheckBox复选框 属性:Caption用于显示文本内容.

C#ListView控件添加Checkbox复选框并获取选中的数目,检查checkbox是否勾选

原地址:http://blog.csdn.net/lucky51222/article/details/41892429 1.添加复选框:listView1.CheckBoxes = true; 2.选中listview并获取选中的数目: [csharp] view plain copy private void listView1_ItemChecked(object sender, ItemCheckedEventArgs e) { e.Item.Selected = e.Item.Chec

JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成.先获取checkbox元素集合,遍历集合,对集合中的每一项做操作. 这里讲几个常用的checkbox复选框的常见示例. 取值 给定页面 <body> <p> <label for="hobby">Hobby:   <input type="checkbox" name="hobby" val

点击文本框弹出可供选择的checkbox复选框代码实例

点击文本框弹出可供选择的checkbox复选框代码实例:本章节分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种方式使<input type="checkbox" />中的复选框被选中. 方法一:直接在HTML行间中添加checked属性.   eg:<input type="checkbox" checked /> 方法二:使用javascript使in

【转载】checkbox复选框的一些深入研究与理解

转载来自:原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌.我是不是应该着眼于眼前的东西,好好的静下心来,超过一般人的沉静与沉浸,研究最基本的东西呢?这番思考,让我找到了一些方向. 对于checkbox,从我开始接触HTML开始,陆陆续续也研究过好多次,然而多是零星的知识点的累加,或是掌握了些表象的东西,是否深入核心,是否深入其本质,是否有了完善的总结,是否

RadioButton(单选按钮)&amp;Checkbox(复选框)

本节引言: 本节给大家带来的是Andoird基本UI控件中的RadioButton和Checkbox; 先说下本节要讲解的内容是:RadioButton和Checkbox的 1.基本用法 2.事件处理: 3.自定义点击效果: 4.改变文字与选择框的相对位置: 5.修改文字与选择框的距离 其实这两个控件有很多地方都是类似的,除了单选和多选,事件处理,其他的都是类似的! 另外还有一个ListView上Checkbox的错位的问题,我们会在ListView那一章对这个问题进行 解决,好的,开始本节内容

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

 checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { display: inline-block; width: 100px; margi

使用jquery获取被选中checkbox复选框的值

使用jquery获取被选中checkbox复选框的值:checkbox是重要的表单元素,在很多多项选择中使用,下面就通过代码实例介绍一下如何获取复选框中所有被选中项的值,希望能够给需要的朋友带来一定的帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.