限制CheckBoxList控件只能单选实现代码及演示动画

开发要求，原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求，这个CheckBoxList控件限制只能单选。

哈哈，看看做出来的效果：
限制CheckBoxList控件只能单选实现代码及演示动画

为了你也能实现出来，可以参考下面的方法，第一是准备好一个对象“地支”（Terrestrial Branch）
TerrestrialBranch.cs

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
/// <summary> 
/// Summary description for TerrestrialBranch 
/// </summary> 
namespace Insus.NET 
{ 
public class TerrestrialBranch 
{ 
private int _ID; 
private string _Name; 
public int ID 
{ 
get{return _ID;} 
set { _ID = value; } 
} 
public string Name 
{ 
get { return _Name; } 
set { _Name = value; } 
} 
public TerrestrialBranch() 
{ 
// 
// TODO: Add constructor logic here 
// 
} 
public TerrestrialBranch(int id, string name) 
{ 
this.ID = id; 
this._Name = name; 
} 
} 
} 

用数据填充这个对象，并用泛型List<t>来存储这十二个对象：

复制代码代码如下:

 
private List<TerrestrialBranch> GetData() 
{ 
List<TerrestrialBranch> tbs = new List<TerrestrialBranch>(); 
tbs.Add(new TerrestrialBranch(1,"子")); 
tbs.Add(new TerrestrialBranch(2, "丑")); 
tbs.Add(new TerrestrialBranch(3, "寅")); 
tbs.Add(new TerrestrialBranch(4, "卯")); 
tbs.Add(new TerrestrialBranch(5, "辰")); 
tbs.Add(new TerrestrialBranch(6, "巳")); 
tbs.Add(new TerrestrialBranch(7, "午")); 
tbs.Add(new TerrestrialBranch(8, "未")); 
tbs.Add(new TerrestrialBranch(9, "申")); 
tbs.Add(new TerrestrialBranch(10, "酉")); 
tbs.Add(new TerrestrialBranch(11, "戌")); 
tbs.Add(new TerrestrialBranch(12, "亥")); 
return tbs; 
} 

在.aspx页面拉一个CheckBoxList控件，设置两个属性RepeatColumns="6" RepeatDirection="Horizontal"

复制代码代码如下:

 
<asp:CheckBoxList ID="CheckBoxListTerrestrialBranch" runat="server" RepeatColumns="6" RepeatDirection="Horizontal"></asp:CheckBoxList> 

把刚才准备好的List<TerrestrialBranch>绑定给这个CheckBoxList控件：

复制代码代码如下:

 
using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.OleDb; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Insus.NET; 
public partial class _Default : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
Data_Binding(); 
} 
private void Data_Binding() 
{ 
this.CheckBoxListTerrestrialBranch.DataSource = GetData(); 
this.CheckBoxListTerrestrialBranch.DataTextField = "Name"; 
this.CheckBoxListTerrestrialBranch.DataValueField = "ID"; 
this.CheckBoxListTerrestrialBranch.DataBind(); 
} 
} 

OK,一切准备就绪，可以写Javascript脚本，放在<head>之内。

复制代码代码如下:

 
window.onload = function () { 
var cbl = document.getElementById('<%= CheckBoxListTerrestrialBranch.ClientID %>') 
var inputs = cbl.getElementsByTagName("input"); 
for (var i = 0; i < inputs.length; i++) { 
if (inputs[i].type == "checkbox") { 
inputs[i].onclick = function () { 
var cbs = inputs; 
for (var i = 0; i < cbs.length; i++) { 
if (cbs[i].type == "checkbox" && cbs[i] != this && this.checked) { 
cbs[i].checked = false; 
} 
} 
} 
} 
} 
} 

限制CheckBoxList控件只能单选实现代码及演示动画

相关推荐