javascript教程 AJAX常用技术 AJAX框架技术
返回首页
当前位置: 首页 > AJAX教程 > javascript教程 >

Javascript获取CheckBoxList的value

时间:2009-12-07 09:42来源:未知 作者:admin 点击:我要投稿  高质量的ASP.NET空间,完美支持1.0/2.0/3.5/4.0/MVC等

在 开发工作中,因为要做用到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>
本站推荐文章:
本站热点文章:
顶一下
(8)
88.9%
踩一下
(1)
11.1%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色 情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片