zoukankan html css js c++ java

ASP.NET DEMO 12 : CheckBoxList 实现单选【转】

转自：http://www.cnblogs.com/Jinglecat/archive/2007/07/18/823201.html

demo:https://files.cnblogs.com/Jinglecat/DEMO12_CheckBoxListSingleCheck.rar

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

主要代码

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

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

function CheckBoxList_Click(sender)

{

var container = sender.parentNode;

if(container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局（默认设置），否则使用流布局

container = container.parentNode.parentNode; // 层次： <table><tr><td><input />

}

var chkList = container.getElementsByTagName("input");

var senderState = sender.checked;

for(var i=0; i<chkList.length;i++) {

chkList[i].checked = false;

}

sender.checked = senderState;

}

<h3>单选效果的 CheckBoxList</h3>

<asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">

<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>

<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>

<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>

<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>

<asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>

</asp:CheckBoxList>

</div>

<asp:CheckBoxList ID="CheckBoxList2" BorderWidth="1" runat="server" DataTextField="Value" DataValueField="Key" OnDataBound="CheckBoxList2_DataBound">

</asp:CheckBoxList>

</div>

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

页面效果

全部代码

 1 <%@ Page Language="C#" AutoEventWireup="true"  %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <script runat="server">
 6 
 7     protected void Page_Load(object sender, EventArgs e)
 8     {
 9         if (!IsPostBack) {
10             LoadCheckBoxListData();
11         }
12     }
13 
14     // CheckBoxList DataBound 事件，
15     // 此事件在执行数据绑定完成之后触发。
16     protected void CheckBoxList2_DataBound(object sender, EventArgs e)
17     {
18         CheckBoxList chkList = (CheckBoxList)sender;
19         foreach (ListItem item in chkList.Items) {
20             item.Attributes.Add("onclick", "CheckBoxList_Click(this)");
21         }
22     }
23 
24     private void LoadCheckBoxListData()
25     {
26         IDictionary dataList1 = CreateSampleDataList(1, 10);
27 
28         CheckBoxList2.DataSource = dataList1;
29         CheckBoxList2.DataBind();
30 
31         RadioButtonList1.DataSource = dataList1;
32         RadioButtonList1.DataBind();
33     }
34 
35     private SortedList CreateSampleDataList(int startOrdinal, int count)
36     {
37         SortedList list = new SortedList();
38         while (count-- > 0) {
39             list.Add(startOrdinal, "item" + startOrdinal);
40             startOrdinal++;
41         }
42         return list;
43     }
44   
45 </script>
46 
47 <html xmlns="http://www.w3.org/1999/xhtml" >
48 <head runat="server">
49     <title>DEMO12_CheckBoxListSingleCheck</title>
50     <script type="text/javascript">
51     function CheckBoxList_Click(sender) 
52     {
53         var container = sender.parentNode;        
54         if(container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局（默认设置），否则使用流布局
55             container = container.parentNode.parentNode; // 层次： <table><tr><td><input />
56         }        
57         var chkList = container.getElementsByTagName("input");
58         var senderState = sender.checked;
59         for(var i=0; i<chkList.length;i++) {
60             chkList[i].checked = false;
61         }     
62         sender.checked = senderState;          
63     }
64     </script>
65 </head>
66 <body>
67     <form id="form1" runat="server">
68     <h3>单选效果的 CheckBoxList</h3>
69     <div style="float:left">
70     <h4>静态项</h4>
71         <asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">
72         <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
73         <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
74         <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
75         <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
76         <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>
77         </asp:CheckBoxList>
78     </div>
79     <div style="float:left;padding-left:100px">
80     <h4>绑定项</h4>
81         <asp:CheckBoxList ID="CheckBoxList2" BorderWidth="1" runat="server" DataTextField="Value" DataValueField="Key" OnDataBound="CheckBoxList2_DataBound">        
82         </asp:CheckBoxList>
83     </div>
84     <div style="float:left;padding-left:100px">
85     <h4>RadioButtonList 对比</h4>
86         <asp:RadioButtonList ID="RadioButtonList1" BorderWidth="1" runat="server" DataTextField="Value" DataValueField="Key">        
87         </asp:RadioButtonList>
88     </div>
89     </form>
90 </body>
91 </html>

查看全文

相关阅读:
R语言初涉
 Android源码大全
 Centos关闭防火墙
 Java开发常用下载的网址
 linux下解压命令大全
 Android常见布局问题
 配置Nutch模拟浏览器以绕过反爬虫限制
 Nutch的发展历程
 用三层交换机当路由器——最复杂的网络拓扑结构
 Ant 简易教程

原文地址：https://www.cnblogs.com/tangge/p/2534693.html