Notes

GridView的CheckBox全選功能

 

建立GridView後，在GridView中加入CheckBox

<asp:TemplateField HeaderText="*" ItemStyle-BackColor="#f5f5f5" HeaderStyle-BackColor="#E2C2DE" ItemStyle-HorizontalAlign="Center">
    <HeaderStyle  Wrap="False" />
    <ItemStyle  Wrap="False" />
    <HeaderTemplate>
        <asp:CheckBox ID="CheckAllItem" runat="server" />
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="CheckBox" AutoCallBack="true" runat="server"></asp:CheckBox>
    </ItemTemplate>
</asp:TemplateField>

<HeaderTemplate>中的CheckBox為表頭的CheckBox(多選用)

<ItemTemplate>中的CheckBox為明細的CheckBox(單選)

在HeaderTemplate裡的CheckBox加入onclick事件

<HeaderTemplate>
    <asp:CheckBox ID="CheckAllItem" runat="server" onclick="javascript: CheckAllItem(this);"  />
</HeaderTemplate>

加入JavaScript

<script language="javascript">	
function CheckAllItem(Check)
{
    elm = document.forms[0];  //取得form表單

    for (i = 0; i < elm.length; i++) 
    {
      if (elm[i].type == "checkbox" && elm[i].id != Check.id) //若為checkbox，並且ID與表頭CheckBox不同。表示為明細的CheckBox
      {
        if (elm.elements[i].checked != Check.checked)  //若明細的CheckBox的checked狀態與表頭CheckBox不同
        {
        elm.elements[i].click();  //明細的CheckBox執行click
        }
      }
    }
}
</script>

 

 END 

回目錄