服务器之家

服务器之家 > 正文

asp.net Javascript获取CheckBoxList的value

时间:2019-06-25 17:54     来源/作者: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> 

结束

相关文章

热门资讯

叠猫猫队长可以退出吗 叠猫猫队长怎么换队伍
叠猫猫队长可以退出吗 叠猫猫队长怎么换队伍 2019-06-05
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
淘宝合合卡可以送好友吗 淘宝合合卡快速获得方式
淘宝合合卡可以送好友吗 淘宝合合卡快速获得方式 2019-06-13
叠猫猫可以邀请多少人 叠猫猫大挑战一个队最多多少人
叠猫猫可以邀请多少人 叠猫猫大挑战一个队最多多少人 2019-06-05
淘宝618叠猫猫怎么退出队伍?每天可退出几次队伍
淘宝618叠猫猫怎么退出队伍?每天可退出几次队伍 2019-06-06
返回顶部