匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。Js动态添加复选框Checkbox的实例方法
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.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);
以上代码中，将checkbox放到li和ul中，这样能起到良好的排列效果，UL和li设置的CSS样式如下：　　复制代码 代码如下:　　#executerDiv{&&& }&&& #executerDiv ul{&&&&&&& margin:0&&&&&&& padding:0&&&&&&& list-style-type:&&&&&&& vertical-align:middle& ;&&& }&&& #executerDiv li{&&&&&&& float:&&&&&&& display:&&&&&&& width:100& &&&&&&& height:20&&&&&&& line-height:20&&&&&&& font-size:14&& &&&&&&& font-weight:&&&&&&&&&& &&&&&&& color:#666666;&&&&&&& text-decoration:&&&&&&& text-align:& &&&&&&& background:#&&& }
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
职称考试题目
招生信息考研政治
网络安全安全设置工具使用手机安全
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&3705人阅读
jQuery获取checkboxlist的value值
CheckboxList是服务器控件，绑定数据容易，服务器端获取选中值也容易。但是生成的静态页面没有ListItem的Value值，所以默认情况下用js在页面中是取不到ListItem的值的。
问题描述：js取不到选中的ListItem的值。
&asp:CheckBoxList
runat=&server&
ID=&listTest&&
&/asp:CheckBoxList&
type=&button&
id=&btnShow&
value=&显示选中值&
下面是生成的静态html：
&table id=&listTest&
border=&0&&
&&&&&&& &input
id=&listTest_0&
type=&checkbox&
name=&listTest$0&
&&&&&&& &label
for=&listTest_0&&基于jQuery的一个震动效果&/label&
&&& &td&&input
id=&listTest_1&
type=&checkbox&
name=&listTest$1&
&&&&&&& &label
for=&listTest_1&&使用css的overflow属性改变缩略图大小&/label&
解决方法：
在绑定checkboxlist时，为ListItem每个对象添加一个alt属性，值保存对应的value值，代码如下：
if (dt != null && dt.Rows.Count &
&&& foreach (DataRow dr
in dt.Rows)
&&&&&&& //分别为text值、value值
&&&&&&& listTest.Items.Add(new ListItem(dr[&Title&].ToString(), dr[&ID&].ToString()));
&&& //为ListItem对象添加alt属性，值保存value值
&&& foreach (ListItem li
in listTest.Items)
&&&&&&& li.Attributes.Add(&alt&, li.Value);
protected void chkbind()
&&&&&&& string sel = &select Product_id,ProductName from Product&;
&&&&&&& SqlDataReader dr = sqlHelper.ExecuteReader(sqlHelper.conn, CommandType.Text, sel, null);
&&&&&&& chkProduct.DataTextField = &ProductName&;
&&&&&&& chkProduct.DataValueField = &Product_id&;
&&&&&&& chkProduct.DataSource =
&&&&&&& chkProduct.DataBind();
&&&&&&& conn.Close();
&&&&&&& foreach (ListItem li in chkProduct.Items)
&&&&&&&&&&& li.Attributes.Add(&alt&, li.Value);
id=&Table1&
border=&0&&
alt=&400&&&input
id=&listTest_0&
type=&checkbox&
name=&listTest$0&
&&& &label
for=&listTest_0&&基于jQuery的一个震动效果&/label&&/span&
alt=&398&&&input
id=&listTest_1&
type=&checkbox&
name=&listTest$1&
&label for=&listTest_1&&使用css的overflow属性改变缩略图大小&/label&&/span&
下面就是js取选中的listitem的值：
$(document).ready(function() {
&&& $(&#btnShow&).click(function() {
&&&&&&& var valuelist =
//保存checkbox选中值
&&&&&&& //遍历name以listTest开头的checkbox
&&&&&&& $(&input[name^='listTest']&).each(function()
&&&&&&&&&&& if (this.checked) {
&&&&&&&&&&&&&&&
//$(this):当前checkbox对象;
&&&&&&&&&&&&&&&
//$(this).parent(&span&):checkbox父级span对象
&&&&&&&&&&&&&&& valuelist += $(this).parent(&span&).attr(&alt&)
+ &,&;
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& if (valuelist.length &
&&&&&&&&&&& //得到选中的checkbox值序列,结果为400,398
&&&&&&&&&&& valuelist = valuelist.substring(0, valuelist.length -
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：189913次
积分：2516
积分：2516
排名：第12402名
原创：79篇
转载：18篇
评论：18条
(1)(2)(3)(2)(3)(5)(2)(1)(5)(2)(2)(1)(1)(1)(1)(2)(2)(3)(2)(2)(6)(8)(1)(6)(11)(2)(4)(17)下次自动登录
现在的位置:
& 综合 & 正文
如何用JS为checkboxlist添加选项
利用AJAX在后台获取数据库里的值放到DATASET里传到前台, for(var i=0;i&ds.Tables[0].Rows.i++) {
var id = ds.Tables[0].Rows[i].ProdCateNo;
var name = ds.Tables[0].Rows[i].ProdCateN
//绑定checkboxlist } 怎么把id,name添加到checkboxlist?
----------------------------------------------------------------------
--------------------------------------------------------
for(var i=0;i&ds.Tables[0].Rows.i++) {
var id = ds.Tables[0].Rows[i].ProdCateNo;
var name = ds.Tables[0].Rows[i].ProdCateN
//绑定checkboxlist
var obj =document.getElementById("CheckBoxList1");
var tr = obj.insertRow();
var td = tr.insertCell();
td.innerHTML="&input id=/""+id+"/" type=/"checkbox/"
/&&label for=/"CheckBoxList1_1/"&"+name+"&/label&"; }
--------------------------------------------------------
谢谢楼上的
--------------------------------------------------------
还有个问题,怎么在写入checkboxlist内容的时候把以前checkboxlist中的内容清空?
--------------------------------------------------------
用removeNode就可以了 var obj =document.getElementById("CheckBoxList1"); for (var i=0 i&obj.rows.i++){
obj.rows(i).removeNode(true); }
--------------------------------------------------------
//绑定checkboxlist
var obj =document.getElementById("CheckBoxList1");
var tr = obj.insertRow();
var td = tr.insertCell();
td.innerHTML="&input id=/""+id+"/" type=/"checkbox/"
/&&label for=/"CheckBoxList1_1/"&"+name+"&/label&"; } 绑定好CheckBoxList1,读取所选的id可以作到,但怎么把所选的内容也读出来 if(Form1.elements[i].type=="checkbox" && Form1.elements[i].checked == true) {
//读取选项的ID
var smallCateId = Form1.elements[i].
//读取选项的内容 }
&&&&推荐文章:
【上篇】【下篇】}