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

时间:2021-12-07 06:18:17

开发要求,原本对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;