asp.net 中GridView控件实现全选及反选的功能

大家都知道邮箱里面有全部删除邮件的复选按钮，其实还是比较简单哈！
废话嘛！就不说那么多了，我先给大家讲哈功能的实现。
首先，拖一个GridView控件和SqlDataSource控件，配置数据源。
然后，进行GridView控件的配置，点击‘编辑模板’添加2个CheckBox控件，分别放在ItemTemplate里面和HeaderTemplate，

下面再添加 javascript脚本代码

<script language="javascript" type="text/javascript">
        function myclick(checkAll) {
            var item = document.getElementsByName("checkUsers");
            for (var i = 0; i < item.length; i++) {
                item[i].checked = checkAll.checked;
            }
        }
        function myclick1() {
            var item = document.getElementsByName("checkUsers");
            var ischeck = true;
            for (var i = 0; i < item.length; i++) {
                if (item[i].checked == false) {
                    ischeck = false;
                    break;
                }
            }
            var mycheck = document.getElementById("checkAll");
            if (ischeck) {               
                mycheck.checked = true;
            } else {
                mycheck.checked = false;
            }
           
        }
    </script>

 

这是GridView控件中的列

<asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" Height="137px"
            PageSize="3" Width="100%" style="margin-bottom: 0px"
            onrowcommand="GridView1_RowCommand"
            onrowdatabound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                     <HeaderTemplate>
                        全选<br /><input type="checkbox" id="cboAll" onclick="myclick(this)" />
                     </HeaderTemplate>
                     <ItemTemplate>
                        <input type="checkbox"  id="checkUsers" onclick="myclick1()" />

                     </ItemTemplate>

           </Cloumns>
</asp:GridView>

 

好了，功能实现！点击全选，所有复选框选中，如果把所有项目的复选框选中，全选的也会自动选中，否则反之。