在客户端控制(CheckBox) DataGrid 的 全选/取消全选

 DataGrid 代码：

< form  id ="Form1"  method ="post"  runat ="server" >
             < asp:TextBox  id ="TextBox1"  style ="Z-INDEX: 101; LEFT: 448px; POSITION: absolute; TOP: 296px"
                runat ="server" ></ asp:TextBox >
             < asp:DataGrid  id ="DataGrid1"  style ="Z-INDEX: 102; LEFT: 88px; POSITION: absolute; TOP: 48px"  runat ="server"
                BorderColor ="#999999"  BorderStyle ="None"  BorderWidth ="1px"  BackColor ="White"  CellPadding ="3"
                GridLines ="Vertical" >
                 < FooterStyle  ForeColor ="Black"  BackColor ="#CCCCCC" ></ FooterStyle >
                 < SelectedItemStyle  Font-Bold ="True"  ForeColor ="White"  BackColor ="#008A8C" ></ SelectedItemStyle >
                 < AlternatingItemStyle  BackColor ="Gainsboro" ></ AlternatingItemStyle >
                 < ItemStyle  ForeColor ="Black"  BackColor ="#EEEEEE" ></ ItemStyle >
                 < HeaderStyle  Font-Bold ="True"  ForeColor ="White"  BackColor ="#000084" ></ HeaderStyle >
                 < Columns >
                     < asp:TemplateColumn  >
                         < HeaderTemplate >
                             < INPUT  id ="CheckAll"  name ="CheckAll"  onclick ="ChooseAll()"  type ="checkbox"   >
                         </ HeaderTemplate >
                         < ItemTemplate >
                            
                                 < asp:CheckBox  id ="CheckBox1"  runat ="server" ></ asp:CheckBox >
                         </ ItemTemplate >
                         < HeaderStyle  Wrap ="False"   ></ HeaderStyle >
                     </ asp:TemplateColumn >
                 </ Columns >
                 < PagerStyle  HorizontalAlign ="Center"  ForeColor ="Black"  BackColor ="#999999"  Mode ="NumericPages" ></ PagerStyle >
             </ asp:DataGrid >
         </ form >

 

JavaScript 代码：

 

     < script  language ="javascript"   >
      var  checkFlag = true ;
     
      function  ChooseAll()
     {
    
       //  alert(checkFlag);
       
       
       if (checkFlag)
       {
        var  inputs  =  document.all.tags( " INPUT " );
        alert(inputs.length);
        for  ( var  i = 0 ;i < inputs.length;i ++ )
            {
             if (inputs[i].type == " checkbox "   &&  inputs[i].id  != " CheckAll " )
              {
              inputs[i].checked = true ;
              }              
            }   
            checkFlag = false ;
       }
       
          else
     {
       var  inputs = document.all.tags( " INPUT " );
        for  ( var  i = 0 ;i < inputs.length;i ++ )
            {
             if (inputs[i].type == " checkbox "   &&  inputs[i].id  != " CheckAll " )
              {
              inputs[i].checked = false ;
              }              
            }  
            checkFlag = true ;

       }
    }
         </ script >

删除确认:

　//  < summary >
　　　　// 让用户加以确认删除数据。
　　　　//  </ summary >
　　　　function DelRec()
　　　　{
 　　　　　　var inputs = document.all.tags("input");
 　　　　　　var selectedLen = 0;
 　　　　　　for( var i=0;i  <  inputs .length; i ++)
 　　　　　　{
  　　　　　　　　if(inputs[i].type  ==  "checkbox")
  　　　　　　　　{
   　　　　　　　　　　if( inputs[i].checked )
   　　　　　　　　　　{
    　　　　　　　　　　　　if(inputs[i].id ! = "CheckAll" )
    　　　　　　　　　　　　{
     　　　　　　　　　　　　　　selectedLen ++;
    　　　　　　　　　　　　}
   　　　　　　　　　　}
  　　　　　　　　}
 　　　　　　}
 　　　　　　if( selectedLen  ==  0 )
 　　　　　　{
  　　　　　　　　alert("请先选择您要删除的数据！");
 　　　　　　}
 　　　　　　else
 　　　　　　{
  　　　　　　　　var flag  = confirm("您确定要删除所选择的这  " + selectedLen + " 条数据吗？");
  　　　　　　　　if(flag)
  　　　　　　　　{
   　　　　　　　　　　document.all("BtnDelRecord").click();  
  　　　　　　　　}
 　　　　　　}
　　　　}

 

 

 

注意大小写，javasript很难调试，所以一定要注意大小写。