用javascript实现DataGrid CheckBox类似于HotMail 全选

代码如下:
CheckBoxOnDataGrid.aspx

<% @ Page language = " c# "  Codebehind = " CheckBoxOnDataGrid.aspx.cs "  AutoEventWireup = " false "  Inherits = " Text_WebApp.CheckBoxOnDataGrid "   %>
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >
< HTML >
   < HEAD >
         < title > CheckBoxOnDataGrid </ title >
         < meta name = " GENERATOR "  Content = " Microsoft Visual Studio .NET 7.1 " >
         < meta name = " CODE_LANGUAGE "  Content = " C# " >
         < meta name = " vs_defaultClientScript "  content = " JavaScript " >
         < meta name = " vs_targetSchema "  content = " http://schemas.microsoft.com/intellisense/ie5 " >
         < script language = " JavaScript "  src = " CheckBox.js " ></ script >
         < LINK href = " style.css "  rel = " stylesheet "  type = " text/css " >
   </ HEAD >
     < body MS_POSITIONING = " GridLayout " >
         < form id = " Form1 "   method = " post "  runat = " server "  name = " Form1 " >
             < FONT face = " 宋体 " ></ FONT >< FONT face = " 宋体 " ></ FONT >< FONT face = 宋体 ></ FONT >
             < br >
             < ASP:DataGrid id = " MyDataGrid "  runat = " server "  Width = " 696px "  BackColor = " white "  BorderColor = " black "
                CellPadding = " 3 "  CellSpacing = " 0 "  Font - Size = " 9pt "  AutoGenerateColumns = " False "  HeaderStyle - BackColor = " darkred "
                HeaderStyle - ForeColor = " white "  Height = " 160px " >
                 < Columns >
                     < asp:TemplateColumn >
                         < HeaderTemplate >
                             < input type = checkbox name = " allbox "  onclick = " CA(); " >
                             < font face = " Webdings "  color = " white "  size = " 4 " > a </ font >
                         </ HeaderTemplate >
                         < ItemTemplate >
                             < asp:CheckBox ID = " DeleteThis "  onclick = " javascript:CCA(this); "  runat = " server "   />
                         </ ItemTemplate >
                     </ asp:TemplateColumn >
                     < asp:TemplateColumn >
                         < HeaderTemplate >
                            ID
                         </ HeaderTemplate >
                         < ItemTemplate >
                             < asp:Label ID = " StoreID "  Text = ' <%# DataBinder.Eval (Container.DataItem, "ID") %> '  runat = " server " />
                         </ ItemTemplate >
                     </ asp:TemplateColumn >
                     < asp:BoundColumn HeaderText = " Store "  Datafield = " Store "  runat = " server "   />
                     < asp:BoundColumn HeaderText = " Address "  Datafield = " Address "  runat = " server "   />
                     < asp:BoundColumn HeaderText = " City "  Datafield = " City "  runat = " server "   />
                     < asp:BoundColumn HeaderText = " State "  Datafield = " State "  runat = " server "   />
                     < asp:BoundColumn HeaderText = " Zip "  Datafield = " Zip "  runat = " server "   />
                 </ Columns >
             </ ASP:DataGrid >
             < br >
             < asp:Button Text = " Delete Items "  ID = " Confirm "  runat = " server "   />
             < span id = " OutputMsg "  EnableViewState = " false "  runat = " server "   />
         </ form >
     </ body >
</ HTML >

CheckBoxOnDataGrid.aspx.cs

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;

namespace  Text_WebApp
{
    /**//// <summary>
    /// CheckBoxOnDataGrid 的摘要说明。
    /// </summary>
    public class CheckBoxOnDataGrid : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataGrid MyDataGrid;
        protected System.Web.UI.WebControls.Button Confirm;
        protected System.Web.UI.HtmlControls.HtmlGenericControl OutputMsg;
        private SqlConnection objConnect;
    
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            objConnect = new SqlConnection ("server=(local);database=pubs;uid=sa;pwd=;");
            if (!IsPostBack) 
            {
                BindData();
            }

        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {    
            this.Confirm.Click += new System.EventHandler(this.Confirm_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion

        public void BindData() 
        {
            String sqlQuery = "Select stor_id As Id, stor_name As Store, City, State, Zip, stor_Address As Address from Stores";
            DataSet ds=new DataSet();
            SqlDataAdapter Sda=new SqlDataAdapter(sqlQuery,objConnect);
            Sda.Fill(ds,"Tb");
            MyDataGrid.DataSource =ds.Tables["Tb"];
            MyDataGrid.DataBind();
            objConnect.Close();
            objConnect = null;
        }

        private void Confirm_Click(object sender, System.EventArgs e)
        {
            string dgIDs = "";
            bool BxsChkd = false; 
            foreach (DataGridItem i in MyDataGrid.Items) 
            {
                CheckBox deleteChkBxItem = (CheckBox) i.FindControl ("DeleteThis");
                if (deleteChkBxItem.Checked) 
                {
                    BxsChkd = true;
                    dgIDs += ((Label) i.FindControl ("StoreID")).Text.ToString() + ",";
                }
            }
            string deleteSQL = "DELETE from Stores WHERE stor_id IN (" + dgIDs.Substring (0, dgIDs.LastIndexOf (",")) + ")";

            if (BxsChkd == true) 
            { 
                
                try 
                {
                    //SqlHelper.ExecuteNonQuery (objConnect, CommandType.Text, deleteSQL);
                    OutputMsg.InnerHtml+="删除"+dgIDs.ToString().Trim()+"成功";
                    OutputMsg.Style["color"] = "#3366cc";
                } 
                catch (SqlException err) 
                { 
                    OutputMsg.InnerHtml += err.Message.ToString(); 
                    OutputMsg.Style["color"] = "#6699cc";
                }
                BindData();
            }
        }
    }
}

CheckBox.js

// CheckBox全选
function  CA(){
var  frm = document.Form1;
for  ( var  i = 0 ;i < frm.elements.length;i ++ )
{
var  e = frm.elements[i];
if  ((e.name  !=  'allbox')  &&  (e.type == 'checkbox'))
{
e.checked = frm.allbox.checked;
if  (frm.allbox.checked)
{
hL(e);
} // endif
else
{
dL(e);
} // endelse

} // endif
} // endfor
}


// CheckBox选择项
function  CCA(CB)
{
var  frm = document.Form1;
if  (CB.checked)
hL(CB);
else
dL(CB);

var  TB = TO = 0 ;
for  ( var  i = 0 ;i < frm.elements.length;i ++ )
{
var  e = frm.elements[i];
if  ((e.name  !=  'allbox')  &&  (e.type == 'checkbox'))
{
TB ++ ;
if  (e.checked)
TO ++ ;
}
}
frm.allbox.checked = (TO == TB) ? true : false ;
}


function  hL(E){
while  (E.tagName != " TR " )
{E = E.parentElement;}
E.className = " H " ;
}

function  dL(E){
while  (E.tagName != " TR " )
{E = E.parentElement;}
E.className = "" ;
}

style.css

. {} {
    font-size : 9pt;
}
.H {} {
    font-size : 9pt;
        cursor:hand;
        color:#3366ff;
        background : #FFF3F3;
  }