繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net Javascript获取CheckBoxList的value
- ASP.NET
- .Net中使用com组件后发生System.ArithmeticException异常的解决办法
- SQL Server.net 和 OLE DB.net连接数据库的比较
- 后台更新DataTable行内容的方法
- 敏捷软件开发（原则，模式与实践）笔记1
- 确保文本框输入值为数值的代码
- XML和数据库之间相互的映射
- 让你的.NET程序兼容不同版本的Dll文件。
- .NET 的数据访问应用程序块（Data Access Application Block）
- 用控件仅一条指令实现界面换肤和多语言版本（YFSkins）
- Microsoft User Interface Process Application Block 研究（3）
- 分享：处理Excel方法小结
- 基于ASP.NET实现全球化
- .net 里面 protected private 的变量也可以访问（新发现）。
- 关于C#中{0}和{1}的问题初次在此发贴，问题对你易对我难，求救了
- 使用C#代码实现增加用户帐号
- 全世界都在关注－微软重大产品发布
- 教你做Rational Rose(UML Design)
- OLE DB取得数据库的架构信息
- VB 从零开始编外挂(三)
- XPath序列之四
ASP.NET 中的 asp.net Javascript获取CheckBoxList的value
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 121 ::
收藏到网摘: n/a
最近在做一个BS的小项目，记得自己搞asp.net的时候，还是两年以前，大部分的东西只是有点印象，忘得差不多了，所以这次也算是温习的过程吧，一边学习，一边赶工，呵呵呵。。。。 以后我会陆续的写出这段时间中学习到的东西，与大家一起分享。这篇文章也算是工作中的一个笔记吧，希望给遇到同样问题的朋友，一点小小的帮助。
在 开发工作中，因为要做用到CheckBoxList在客户端用js操作，无论js怎样调试，就是无法获取value的值，很是郁闷，后来Google了下，去了趟CodeProject，算是幸运的。我们在网页上放置一下代码：
复制代码 代码如下:
<asp:CheckBoxList runat="server" ID="chkDemo" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Text="测试A" Value="A"></asp:ListItem>
<asp:ListItem Text="测试B" Value="B"></asp:ListItem>
<asp:ListItem Text="测试C" Value="C"></asp:ListItem>
<asp:ListItem Text="测试D" Value="D"></asp:ListItem>
<asp:ListItem Text="测试E" Value="E"></asp:ListItem>
</asp:CheckBoxList>
当浏览器呈现这段代码后，我们再看看是什么样的Html脚本：
<table id="chkDemo" border="0">
<tr><td><input id="chkDemo_0" type="checkbox" name="chkDemo$0" /><label for="chkDemo_0">测试A</label></td>
<td><input id="chkDemo_1" type="checkbox" name="chkDemo$1" /><label for="chkDemo_1">测试B</label></td>
<td><input id="chkDemo_2" type="checkbox" name="chkDemo$2" /><label for="chkDemo_2">测试C</label></td>
<td><input id="chkDemo_3" type="checkbox" name="chkDemo$3" /><label for="chkDemo_3">测试D</label></td>
<td><input id="chkDemo_4" type="checkbox" name="chkDemo$4" /><label for="chkDemo_4">测试E</label></td> </tr></table>
这段Html脚本会因为RepeatLayout的设置有所差异，但是都有一个共同点，就是 生成的CheckBox没有value属性，
所以在客户端用js是没办法获取值的
为了解决这个问题，我们需要扩展一下CheckBoxList：这是我在CodeProject上找到的源码，时间久了，链接就不贴了吧。
复制代码 代码如下:
[ToolboxData("<{0}:CheckBoxListEx runat=\"server\"></{0}:CheckBoxListEx>")]
public class CheckBoxListEx : CheckBoxList,IRepeatInfoUser
{
void IRepeatInfoUser.RenderItem(ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer)
{
string clientID = UniqueID + this.ClientIDSeparator + repeatIndex.ToString(NumberFormatInfo.InvariantInfo); //var
writer.WriteBeginTag("input");
writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("name", UniqueID + this.IdSeparator + repeatIndex.ToString(NumberFormatInfo.InvariantInfo));
writer.WriteAttribute("id", clientID);
writer.WriteAttribute("value", Items[repeatIndex].Value);
if (Items[repeatIndex].Selected)
writer.WriteAttribute("checked", "checked");
System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;
foreach (string key in attrs.Keys)
{
writer.WriteAttribute(key, attrs[key]);
}
writer.Write("/>");
writer.Write("<label for='" + clientID + "'>");
writer.Write(Items[repeatIndex].Text);
writer.Write("</label>");
}
上边的这段代码是我经过修改的，与原著中有些差别：clientID的生成以及Checked属性的添加等，我想这段代码不需要再详细的讲解了吧。
把它编译成单独的类，在Toolbox上会自动出现，像使用那个正常的CheckBoxList一样，拖动到页面就可以了。
在客户端，我们js取值大致如下：
复制代码 代码如下:
<script>
function getDemoValue()
{ var els = document.getElementById("chkDemo"); var vals= ''; if (els != null) { var chks = els.getElementsByTagName("input"); for (var k = 0, len = chks.length; k < len; k++) { var chk = chks[k]; if (chk != null && chk.type == 'checkbox' && chk.checked) { vals+= ',' + chk.value; } } }
if(vals.length>1)
vals = vals.substring(1);
return vals;
}
</script>
结束
评论 (0) All
