转自：

demo:

一看标题估计大家都开始怀疑了：单选？为什么不直接使用 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  4  5 46 47 48 49     50     65 66 67     
      
       68     
       
单选效果的 CheckBoxList
69     
       
        70     
        
静态项
71         
        
         72         
         
          Item1
         73         
         
          Item2
         74         
         
          Item3
         75         
         
          Item4
         76         
         
          Item5
         77         
        78     
       
79     
       
        80     
        
绑定项
81         
        
                 82         
        83     
       
84     
       
        85     
        
RadioButtonList 对比
86         
        
                 87         
        88     
       
89     
      
90 91