一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術|正則表達式|C/C++|IOS|C#|Swift|Android|VB|R語言|JavaScript|易語言|vb.net|

服務器之家 - 編程語言 - ASP.NET教程 - asp.net Javascript獲取CheckBoxList的value

asp.net Javascript獲取CheckBoxList的value

2019-06-25 17:54ASP.NET之家 ASP.NET教程

最近在做一個BS的小項目,記得自己搞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> 

結束

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板: 日本卡一卡2卡3卡4精品卡无人区 | 亚洲日日操 | 日本人黄色 | 久久久久影视 | 亚洲免费小视频 | 欧美精品久久久亚洲 | 99精品国产自在现线观看 | 24adc年龄18岁欢迎大驾光临 | 2020最新版的ab片 | 任我淫| 欧美一级片免费看 | 日本一卡=卡三卡免费 | chinese军人@gay| 亚洲欧美成人综合久久久 | 星空无限传媒视频在线观看视频 | 国产精品免费aⅴ片在线观看 | 幻女free性zoz0交 | 新影音先锋男人色资源网 | 久久免费看少妇高潮A片JA | 免费尤物视频 | 日本黄色一区 | 亚洲人成网站在线观看播放青青 | 波多野结衣一区免费作品 | 国产乱妇无码大片在线观看 | www.俺去| 亚洲国产成人精品无码区99 | 91看片淫黄大片.在线天堂 | 亚洲视频在线一区二区三区 | 给我免费观看的视频在线播放 | 楚乔传第二部全60集免费观看 | 青青成人福利国产在线视频 | 日本漫画大全之工之口 | 国产在线一区二区杨幂 | 亚洲天堂精品在线 | 欧美一级片在线看 | 欧美夜夜精品一级爽 | 亚洲精品乱码久久久久久蜜桃 | 亚洲精品在线播放 | 暖暖的视频完整视频韩国免费 | 男人女人日皮 | 日本爽p大片免费观看 |