asp.net Javascript获取CheckBoxList的value
程序员文章站
2024-03-09 11:42:59
以后我会陆续的写出这段时间中学习到的东西,与大家一起分享。这篇文章也算是工作中的一个笔记吧,希望给遇到同样问题的朋友,一点小小的帮助。 在 开发工作中,因为要做用到chec...
以后我会陆续的写出这段时间中学习到的东西,与大家一起分享。这篇文章也算是工作中的一个笔记吧,希望给遇到同样问题的朋友,一点小小的帮助。
在 开发工作中,因为要做用到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>
结束
在 开发工作中,因为要做用到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>
结束
推荐阅读