在用戶端控制(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很難調試，所以一定要注意大小寫。