ASP.NET DEMO 12 : CheckBoxList 实现单选

转自: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 测试通过

页面效果

ASP.NET DEMO 12 : CheckBoxList 实现单选

 

 

 

全部代码
 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>

你可能感兴趣的:(checkbox)