快捷導(dǎo)航

限制CheckBoxList控件只能單選實現(xiàn)代碼及演示動畫

更新時間：2013年01月23日 09:20:03 作者：

開發(fā)要求，原本對CheckBoxList控件是用來讓用戶多選的。但現(xiàn)在特殊要求，這個CheckBoxList控件限制只能單選,很多新手朋友可能不知從何下手，為此本文的出現(xiàn)時有必要的了，有需要的朋友可以了解此文

開發(fā)要求，原本對CheckBoxList控件是用來讓用戶多選的。但現(xiàn)在特殊要求，這個CheckBoxList控件限制只能單選。

哈哈，看看做出來的效果：

為了你也能實現(xiàn)出來，可以參考下面的方法，第一是準(zhǔn)備好一個對象“地支”（Terrestrial Branch）
TerrestrialBranch.cs

復(fù)制代碼代碼如下:

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

用數(shù)據(jù)填充這個對象，并用泛型List<t>來存儲這十二個對象：

復(fù)制代碼代碼如下:

 
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控件，設(shè)置兩個屬性RepeatColumns="6" RepeatDirection="Horizontal"

復(fù)制代碼代碼如下:

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

把剛才準(zhǔn)備好的List<TerrestrialBranch>綁定給這個CheckBoxList控件：

復(fù)制代碼代碼如下:

 
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,一切準(zhǔn)備就緒，可以寫Javascript腳本，放在<head>之內(nèi)。

復(fù)制代碼代碼如下:

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