浅析ASP.NET CheckBoxList-asp.net vue

ASP.NET CheckBoxList 实现单选

一看标题估计大家都开始怀疑了：单选？为什么不直接使用 RadioButtonList ？
是的。你是对的。然而，实际应用中需求千变万化，谁让我们的客户够 BT 呢？

主要代码

只有一个通用的ASP.NET CheckBoxList_Click 函数，
需要注意的是ASP.NET CheckBoxList 可以呈现为 table 布局，也可以呈现为流布局（使用 span 做外部容器）

我的习惯是，脚本代码中，尽量不直接引用 html id，因为对于服务器控件对应的是 ClientID，而ClientID与控件层次关联的，不利于代码移植复用，因此尽可能选择直接传递对象，通过 DOM 获取相关的父控件和子控件。

functionCheckBoxList_Click(sender)  
{  
varcontainer=sender.parentNode;  
if(container.tagName.toUpperCase()=="TD"){  
//服务器控件设置呈现为table布局（默认设置），否则使用流布局  
containercontainer=container.parentNode.parentNode;  
//层次：<table><tr><td><input/> 
}  
varchkList=container.getElementsByTagName("input");  
varsenderState=sender.checked;  
for(vari=0;i<chkList.length;i++){  
chkList[i].checked=false;  
}  
sender.checked=senderState;  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<h3>单选效果的CheckBoxList</h3> 
<divstyledivstyle="float:left"> 
<h4>静态项</h4> 
<asp:CheckBoxListIDasp:CheckBoxListID=
"CheckBoxList1"BorderWidth="1"runat="server"RepeatLayout="Flow"> 
<asp:ListItemonclickasp:ListItemonclick=
"CheckBoxList_Click(this)"Value="Item1">Item1</asp:ListItem> 
<asp:ListItemonclickasp:ListItemonclick=
"CheckBoxList_Click(this)"Value="Item2">Item2</asp:ListItem> 
<asp:ListItemonclickasp:ListItemonclick=
"CheckBoxList_Click(this)"Value="Item3">Item3</asp:ListItem> 
<asp:ListItemonclickasp:ListItemonclick=
"CheckBoxList_Click(this)"Value="Item4">Item4</asp:ListItem> 
<asp:ListItemonclickasp:ListItemonclick=
"CheckBoxList_Click(this)"Value="Item5">Item5</asp:ListItem> 
</asp:CheckBoxList> 
</div> 
<divstyledivstyle="float:left;padding-left:100px"> 
<h4>绑定项</h4> 
<asp:CheckBoxListIDasp:CheckBoxListID="CheckBoxList2"BorderWidth="1"runat=
"server"DataTextField="Value"DataValueField="Key"OnDataBound=
"CheckBoxList2_DataBound"> 
</asp:CheckBoxList> 
</div> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

兼容性
IE 6 SP6, FF 2.0, Opera 9.2 测试通过

页面效果

页面效果

【编辑推荐】