Restrict the CheckBoxList control to only implement code and demo animation by single choice

Development requirements: The CheckBoxList control was originally used for multiple selections. However, the CheckBoxList control has special requirements that only one choice is allowed.

Haha, let's take a look at the effect:

For implementation, you can refer to the following method. The first is to prepare a Terrestrial Branch object)
TerrestrialBranch. cs
Copy codeThe Code is as follows:
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;
}
}
}

Fill in the object with data and use the generic List <t> to store the twelve objects:
Copy codeThe Code is as follows:
Private List <TerrestrialBranch> GetData ()
{
List <TerrestrialBranch> tbs = new List <TerrestrialBranch> ();
Tbs. Add (new TerrestrialBranch (1, "sub "));
Tbs. Add (new TerrestrialBranch (2, "ugly "));
Tbs. Add (new TerrestrialBranch (3, ""));
Tbs. Add (new TerrestrialBranch (4, "Mao "));
Tbs. Add (new TerrestrialBranch (5, "Chen "));
Tbs. Add (new TerrestrialBranch (6, "Si "));
Tbs. Add (new TerrestrialBranch (7, "Wu "));
Tbs. Add (new TerrestrialBranch (8, "not "));
Tbs. Add (new TerrestrialBranch (9, "shen "));
Tbs. Add (new TerrestrialBranch (10, ""));
Tbs. Add (new TerrestrialBranch (11, "batch "));
Tbs. Add (new TerrestrialBranch (12, "Hai "));
Return tbs;
}

On the. aspx page, pull a CheckBoxList control and set two properties: RepeatColumns = "6" RepeatDirection = "Horizontal"
Copy codeThe Code is as follows:
<Asp: CheckBoxList ID = "CheckBoxListTerrestrialBranch" runat = "server" RepeatColumns = "6" RepeatDirection = "Horizontal"> </asp: CheckBoxList>

Bind the prepared List <TerrestrialBranch> to the CheckBoxList control:
Copy codeThe Code is as follows:
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. Everything is ready. You can write Javascript scripts and put them in Copy codeThe Code is as follows:
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;
}
}
}
}
}
}