Js动态添加复选框Checkbox的实例方法!!!
首先,使用JS动态产生Checkbox可以采用如下类似的语句:
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",'123456');
但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用
document.createTextNode('XXX')
方法来产生一个文本节点,放在checkbox后面。
如下代码,程序产生了一个checkbox和一个文本节点,并将它们放到一个li对象中,再将li对象添加到ul对象中:
var executerDiv=$("executerDiv");
executerDiv.innerHTML="";
var ul=document.createElement("ul");
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
// 加入复选框
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",arr[0]);
checkBox.setAttribute("name", arr[1]);
var li=document.createElement("li");
li.appendChild(checkBox);
li.appendChild(document.createTextNode(arr[1]));
ul.appendChild(li);
}
executerDiv.appendChild(ul);
//by [url=http://www.jbxue.com]http://www.jbxue.com[/url]
以上代码中,将checkbox放到li和ul中,这样能起到良好的排列效果,UL和li设置的CSS样式如下:
#executerDiv{
}
#executerDiv ul{
margin:0px;
padding:0px;
list-style-type:none;
vertical-align:middle ;
}
#executerDiv li{
float:left;
display:block;
width:100px;
height:20px;
line-height:20px;
font-size:14px;
font-weight:bold;
color:#666666;
text-decoration:none;
text-align:left;
background:#ffffff;
}
分享到:
相关推荐
Js动态添加复选框Checkbox的实例方法,需要的朋友可以参考一下
javascript动态添加checkbox复选框的方法.docx
带复选框JS树 复选框树,很好用!JS权限树,带例子
spreadjs_列头添加复选框全选功能-demo
在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果。 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type",...
由于原版dtree作者没有加上复选框功能,我用来做用户模块权限功能的时候很不好用,网上也找到一些基于dtree添加了checkbox的修改版,但是用起来很不顺手,最后不得不根据自己的需要一再修改成了现在这个版本。...
实现table表格checkbox复选框的全选 反选.
CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下 思路: 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...
首先来看看实现的效果图: ...HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t
cookie 复选框 ... 所有 cookie 复选框都应该添加 data-checkbox-* data-api。 您需要设置data-cookie-checkbox="true" ,以使一个cookie复选框,然后设置data-cookie-check-box-key="{key}"和data-cookie-c
只需将checkbox.2.1.0.js JavaScript文件包含在您的网页中,然后实例化一个复选框,如下所示: var checkbox = new window . checkboxjs . Checkbox ( color , [ checked ] ) ; 颜色必须是一个数组,其中包含三个...
道具Struts类型必需的默认描述checked 布尔不不明确的复选框是否被选中className 细绳不不明确的要添加的其他className disabled 布尔不错误的复选框是否被禁用id 细绳不uuidv1() 要添加到标签和复选框的ID label ...
修改后的dtree,添加了多选框,并可设置多选框默认选择,构造功能树时使用
本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
angular-bootstrap-复选框 AngularJS的复选框的样式适合Twitter Bootstrap标准设计 屏幕截图: 描述: 使用输入HTML元素的标准复选框与Bootstrap结合使用时看起来并不好。 令人惊讶的是,我找不到任何漂亮的,简单...
react-native-basic-复选框 该软件包提供了两种复选框样式,浅色和深色。 浅色样式使用Font Awesome 4'square 'square-o'和'check-square-o'图标,深色样式使用'square'和'check-square'图标。 当添加对Font Awesome...
###主要特征使用Google材质字体图标在div中显示复选框仅显示一个复选框或带有嵌入式标签的复选框标签也是可点击的如果图标以特定方式使用,则较旧的IE(在IE 7+中经过测试)支持易于使用且可完全自定义入门下载该...
下拉复选框基于JQuery的下拉复选框列表(JQuery 1.7.2+) dropdown-checkbox是基于JQuery的下拉复选框列表,用于轻松地将HTML select标签替换为添加的“ multiple”属性,并使用复选框将其转换为下拉列表。 复选框...