ASP.NET DEMO 12 : CheckBoxList 实现单选【转】-优快云博客

本文介绍了一种实现单选效果的CheckBoxList方法，包括如何使用脚本代码控制CheckBoxList的单选行为，并展示了静态项和绑定项的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

demo:http://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 >

< div style ="float:left" >

< h4 > 静态项 </ h4 >

< 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 >

< div style ="float:left;padding-left:100px" >

< h4 > 绑定项 </ h4 >

< 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 οnclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
73         <asp:ListItem οnclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
74         <asp:ListItem οnclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
75         <asp:ListItem οnclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
76         <asp:ListItem οnclick="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>