checkbox for CheckBoxList implementation of the full selection or total cancellation (JS code implementation) _ Practical skills

At one time, CheckBoxList too many choices, the user needs a full selection or cancel the function. Use JavaScript below to implement it.
prepare an object.：
Musictype

Copy Code code 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;
}
}
}

Populating Objects：

Copy Code code 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 Red Song"));
Mt. ADD (New Musictype (3, "Children's Song"));
Mt. ADD (New Musictype (4, "National Select"));
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 Classics"));
Mt. ADD (New Musictype (9, "skewers"));
Mt. ADD (New Musictype (10, "slow Song"));
return MT;
}

Build an ASPX page in your site, and pull two controls, one checkbox and CheckBoxList:

Copy Code code 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 = "></asp:CheckBoxList>"

Next, we bind the data for the CheckBoxList：

Copy Code code 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 Code code 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 finish, look at the effect：