asp.net Javascript获取CheckBoxList的value_实用技巧

以后我会陆续的写出这段时间中学习到的东西,与大家一起分享。这篇文章也算是工作中的一个笔记吧,希望给遇到同样问题的朋友,一点小小的帮助。
在 开发工作中,因为要做用到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>

结束

时间: 2024-12-05 06:06:24

asp.net Javascript获取CheckBoxList的value_实用技巧的相关文章

javascript 获取元素样式必杀技_javascript技巧

Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用

Win 2000下ASP.NET开发环境的配置_实用技巧

Win 2000下ASP.NET的配置 Win 2000(包括Professional,Server和Advanced Server)在默认情况下是不支持ASP.NET的.必须对它进行一个环境的配置. 客户端 SQL Server .NET 数据提供程序 Microsoft 数据访问组件 (MDAC) 2.6 或更高版本 对系统管理信息的访问 Windows Management Instrumentation (WMI)(在 Windows 2000操作系统一起安装)COM+ 服务 Windo

Asp.net 页面调用javascript变量的值_实用技巧

在html页中,定义了TextBox控件, 复制代码 代码如下: <td align="center" style="width: 183px; height: 25px"> 纬度:<asp:TextBox ID="TextBox_l" runat="server" Width="76px"></asp:TextBox> 经度:<asp:TextBox ID=&qu

ASP.NET操作各类时间段获取方法汇总_实用技巧

本文实例讲述了ASP.NET操作各类时间段获取方法,分享给大家供大家参考.具体如下: 复制代码 代码如下: DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays(1- Convert.ToInt32(dt.DayOfWeek.ToString("d"))); //本周周一 DateTime endWeek = startWeek.AddDays(6); //本周周日 DateTime startMonth

asp.net 实现动态显示当前时间(不用javascript不考虑开销)_实用技巧

Default.aspx页面:先拉一个ScriptManager控件到页面,然后拉一个UpdatePanel控件.UpdatePanel里面放一个Label用于显示时间,放一个timer控件用于控制时间的更新.注意Label与Label都要放到UpdatePanel控件里面.最后,timer控件的Interval属性设置为1000,让它每1秒执行一次即更新时间. Default.aspx.cs页面:只需在 protected void Page_Load(object sender, Event

ASP.NET在底层类库中获取Session C#类中获取Session[原创]_实用技巧

类库中获取Session首先要添加引用 获取Session 复制代码 代码如下: string user = (string)HttpContext.Current.Session["user"]; 获取Page 复制代码 代码如下: System.Web.UI.Page page = (System.Web.UI.Page)HttpContext.Current.Handler; 获取当前 Request Response 等对象都是在这里 复制代码 代码如下: HttpRespon

对asp.net缓存 的深入了解_实用技巧

一.缓存概念,缓存的好处.类型.--------------------------------------------------------------------------------           缓存是一种用空间换取时间的技术,通俗点也就是说把你得到的数据存放在内存中一段时间,在这短时间内服务器不去读取数据库.或是真实的数据源,而是读取你存放在内存中的数据,这里你会疑惑怎么设置存放数据,能存放什么样子的数据,存放时间的设置,真实数据源数据改变服务器不就读取存在偏差?别急,下面慢

在ASP.NET中用MSDNURLRewriting实现Url Rewriting_实用技巧

作者:Scott Mitchell翻译:Janssen 1.0.请一定要抱着批评的态度来看该文章 1.1. 概要分析如何使用微软提供的ASP.NET来对动态产生的URL地址进行网址重写.网址重写是实现一种截取网址请求并将其进行处理后重新指向到一个指定的网址的过程.作者本人在对各种实现网址重写的技术进行研究和探讨后得出的经验和方法,希望能对您有所帮助. 1.2. 内容简介稍微花点时间看一看你做的网站里头的URL地址,你看到类似这样的地址吗http://yoursite.com/info/dispE

ASP.NET预备知识学习笔记_实用技巧

.NET FrameWork框架 是一套应用程序开发框架,主要目的提供一个开发模型. 主要的两个组件:     公共语言运行时(Common Language Runtime)(CLR): 提供内存管理.线程管理和远程处理等核心服务,并且还强制实施严格的安全类型,提高代码的安全性和可靠想. .NET  Framework类库: 与CLR紧密集成,可以使用它开发多种应用程序和服务.主要包括控制台应用程序.Windows窗体应用程序.WindowsPresentationFoundation(WPF