CheckBox implements full or cancel selection for CheckBoxList (js Code Implementation)

At a certain time, there are too many options for the CheckBoxList. You need a function of Selecting All or canceling all. The following uses Javascript to implement it.
Prepare an object:
MusicType Copy codeThe Code is as follows: using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
/// <Summary>
/// Summary description for MusicType
/// </Summary>
Namespace Insus. NET
{
Public class MusicType
{
Private int _ ID;
Private string _ TypeName;
Public int ID
{
Get {return _ ID ;}
Set {_ ID = value ;}
}
Public string TypeName
{
Get {return _ TypeName ;}
Set {_ TypeName = value ;}
}
Public MusicType ()
{
//
// TODO: Add constructor logic here
//
}
Public MusicType (int id, string typeName)
{
This. _ ID = id;
This. _ TypeName = typeName;
}
}
}

Filling object:Copy codeThe Code is as follows: public List <MusicType> GetMusicType ()
{
List <MusicType> mt = new List <MusicType> ();
Mt. Add (new MusicType (1, "Sweet Love Song "));
Mt. Add (new MusicType (2, "Network hongge "));
Mt. Add (new MusicType (3, "children's songs "));
Mt. Add (new MusicType (4, "Ethnic selection "));
Mt. Add (new MusicType (5, "campus song "));
Mt. Add (new MusicType (6, "Rock Music "));
Mt. Add (new MusicType (7, "prenatal music "));
Mt. Add (new MusicType (8, "Red name song "));
Mt. Add (new MusicType (9, "braised gold "));
Mt. Add (new MusicType (10, "slow songs "));
Return mt;
}

Create An aspx webpage on the site and pull two controls, one being CheckBox and CheckBoxList:Copy codeThe Code is as follows: select all <asp: CheckBox ID = "CheckBoxAll" runat = "server" onClick = "javascript: Check_Uncheck_All (this);"/> <br/>
<Asp: CheckBoxList ID = "CheckBoxListMusicType" runat = "server" RepeatColumns = "3" RepeatDirection = "Horizontal" Width = "300"> </asp: CheckBoxList>

Next, we bind data to the CheckBoxList:Copy codeThe Code is as follows: using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using Insus. NET;
Public partial class Default2: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
Data_Binding ();
}
Private void Data_Binding ()
{
This. CheckBoxListMusicType. DataSource = GetMusicType ();
This. CheckBoxListMusicType. DataTextField = "TypeName ";
This. CheckBoxListMusicType. DataValueField = "ID ";
This. CheckBoxListMusicType. DataBind ();
}
}

Finally, write Javascript code.:Copy codeThe Code is as follows: <script type = "text/javascript">
Function Check_Uncheck_All (cb ){
Var cbl = document. getElementById ("<% = CheckBoxListMusicType. ClientID %> ");
Var input = cbl. getElementsByTagName ("input ");
If (cb. checked ){
For (var I = 0; I <input. length; I ++ ){
Input [I]. checked = true;
}
}
Else {
For (var I = 0; I <input. length; I ++ ){
Input [I]. checked = false;
}
}
}
</Script>

OK. Check the effect.: