|
|
在 開(kāi)發(fā)工作中，因?yàn)橐鲇玫紺heckBoxList在客戶端用js操作，無(wú)論js怎樣調(diào)試，就是無(wú)法獲取value的值，很是郁悶，后來(lái)Google了下，去了趟CodeProject，算是幸運(yùn)的。我們?cè)诰W(wǎng)頁(yè)上放置一下代碼：
復(fù)制代碼 代碼如下:
<ASP:CheckBoxList runat="server" ID="chkDemo" RepeatDirection="Horizontal" RepeatLayout="Flow"> <ASP:ListItem Text="測(cè)試A" Value="A"></ASP:ListItem>
<ASP:ListItem Text="測(cè)試B" Value="B"></ASP:ListItem>
<ASP:ListItem Text="測(cè)試C" Value="C"></ASP:ListItem>
<ASP:ListItem Text="測(cè)試D" Value="D"></ASP:ListItem>
<ASP:ListItem Text="測(cè)試E" Value="E"></ASP:ListItem>
</ASP:CheckBoxList>
當(dāng)瀏覽器呈現(xiàn)這段代碼后，我們?cè)倏纯词鞘裁礃拥腍tml腳本：
<table id="chkDemo" border="0">
<tr><td><input id="chkDemo_0" type="checkbox" name="chkDemo$0" /><label for="chkDemo_0">測(cè)試A</label></td>
<td><input id="chkDemo_1" type="checkbox" name="chkDemo$1" /><label for="chkDemo_1">測(cè)試B</label></td>
<td><input id="chkDemo_2" type="checkbox" name="chkDemo$2" /><label for="chkDemo_2">測(cè)試C</label></td>
<td><input id="chkDemo_3" type="checkbox" name="chkDemo$3" /><label for="chkDemo_3">測(cè)試D</label></td>
<td><input id="chkDemo_4" type="checkbox" name="chkDemo$4" /><label for="chkDemo_4">測(cè)試E</label></td> </tr></table>
這段Html腳本會(huì)因?yàn)镽epeatLayout的設(shè)置有所差異，但是都有一個(gè)共同點(diǎn)，就是 生成的CheckBox沒(méi)有value屬性，
所以在客戶端用js是沒(méi)辦法獲取值的
為了解決這個(gè)問(wèn)題，我們需要擴(kuò)展一下CheckBoxList：這是我在CodeProject上找到的源碼，時(shí)間久了，鏈接就不貼了吧。
復(fù)制代碼 代碼如下:
[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>");
}
上邊的這段代碼是我經(jīng)過(guò)修改的，與原著中有些差別：clientID的生成以及Checked屬性的添加等，我想這段代碼不需要再詳細(xì)的講解了吧。
把它編譯成單獨(dú)的類，在Toolbox上會(huì)自動(dòng)出現(xiàn)，像使用那個(gè)正常的CheckBoxList一樣，拖動(dòng)到頁(yè)面就可以了。
在客戶端，我們js取值大致如下：
復(fù)制代碼 代碼如下:
<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>
結(jié)束
AspNet技術(shù)：asp.net Javascript獲取CheckBoxList的value，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
