郑德才博客

前台GridView 绑定数据，同时添加一个CheckBox 复选框，使用js实现全选

                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None"
                                HeaderStyle-Height="30px" OnRowDataBound="GridView1_RowDataBound" RowStyle-Height="25px"
                                UseAccessibleHeader="False" CssClass="GridCss" Width="100%">
                                <HeaderStyle Height="30px" CssClass="GridHeaderCss" BackColor="#E1E1E1" />
                                <RowStyle Height="25px" CssClass="GridRowCss" BackColor="#FFFFFF" />
                                <Columns>
                                    <asp:TemplateField HeaderText="ID" Visible="False">
                                        <ItemTemplate>
                                            <asp:Label ID="TemplateID" runat="server" Text='<%# Eval("ID").ToString() %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle Width="120px" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderStyle-Width="50px" HeaderText="">
                                        <HeaderTemplate>
                                            <asp:CheckBox ID="CheckAll" runat="server" BorderStyle="None" onclick="return select_deselectAll(this.checked, this.id)" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chk" runat="server"  />
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="标题">
                                        <ItemTemplate>
                                            <asp:Label ID="Title" runat="server" Text='<%# Eval("Name").ToString()%> '></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Left" Width="370" />
                                    </asp:TemplateField>
                                </Columns>
                                <EmptyDataTemplate>
                                    <div align="center">
                                        <asp:Label ID="labelnull" runat="server" Text="暂时没有您需要的模板信息"></asp:Label></div>
                                </EmptyDataTemplate>
                            </asp:GridView>

                          使用btnAllCheck按钮可以全选： <input type="submit" name="btnAllCheck" value="全选" onclick="CheckAll();" id="btnCheck"   class="btn" style="height: 25px;" />

                          使用asp:CheckBox也可以全选： <asp:CheckBox ID="CheckAll" runat="server" BorderStyle="None" onclick="return select_deselectAll(this.checked, this.id)" />
js代码：

    <script type="text/javascript" language="javascript">

    function select_deselectAll(chkVal, idVal) {
        var frm = document.forms[0];
        for (i = 0; i < frm.length; i++) {
            if (idVal.indexOf('CheckTravelAll') != -1) {
                if (frm.elements[i].type == "checkbox" && frm.elements[i].id.indexOf("chkSms") != -1) {
                    if (chkVal == true) {
                        frm.elements[i].checked = true;
                    } else {
                        frm.elements[i].checked = false;
                    }
                }
            }
        }
    }
    function CheckAll() {
        var frm = document.forms[0];
        for (i = 0; i < frm.length; i++) {
            if (frm.elements[i].type == "checkbox" && frm.elements[i].id.indexOf("chk") != -1) {
                frm.elements[i].checked = true;
            }
            if (frm.elements[i].type == "checkbox" && frm.elements[i].id.indexOf("CheckAll") != -1) {
                frm.elements[i].checked = true;
            }
        }
    }

    </script>