如何选择gridview中的所有复选框？

Question

我想检查放置在Gridview中的ListView内的复选框。 Gridview有很多行，每行都有一个List视图和相关的recrods。 每行包含一个名为select all的CheckBox。我想检查伴随该特定行的子ListView控件的复选框。

我有一个服务器端代码，我可以从中做到这一点。但它耗费了太多时间..即如果有超过1000条记录，大约需要1-2分钟来选择记录。我希望使用Javascript完成此操作。我怎样才能做到这一点。

这是表示GridView和ListView的图像。 GridView是Groups，Contacts是ListView 当我在GridView中选择“SelectAll”按钮时，应选择适当的联系人。

如何使用Javascript实现此目的。

这是网格视图的代码

 <asp:GridView ID="GridViewGroups" runat="server" AutoGenerateColumns="False"                                      
                                onrowdatabound="GridViewGroups_RowDataBound" Width="100%" 
                                BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" 
                                onselectedindexchanged="GridViewGroups_SelectedIndexChanged" 
                                meta:resourcekey="GridViewGroupsResource1" >
                            <Columns>
                                <asp:TemplateField HeaderText="Groups" 
                                    meta:resourcekey="TemplateFieldResource1" HeaderStyle-CssClass="tSubHead">
                                    <ItemTemplate>
                                        <div align="left" >
                                     <asp:Panel ID="PanelContainer" runat="server" Width="100%" 
                                                meta:resourcekey="PanelContainerResource1" >

                                    <asp:Panel ID="PanelHeaderList" runat="server"   
                                             meta:resourcekey="PanelHeaderListResource1" CssClass="tSubHead2" style="cursor:pointer;">
                                    <asp:ImageButton ID="Image1" runat="server" ImageUrl="../micons/IC_Plus.png" CssClass="tImage" 
                                            AlternateText="Expand or Collapse" meta:resourcekey="Image1Resource1"/>
                                    <asp:Label ID="LabelGrpName_sm" runat="server" 
                                            Text='<%# string.Format("{0} ({1})", Eval("Grp_Name"),Eval("CountNo")) %>' 
                                            meta:resourcekey="LabelGrpName_smResource1" />
                                     </asp:Panel>
                                    <div style="float:left;width:200px;" >  
                                    <asp:HiddenField ID="hfGrpID" runat="server" Value='<%# Eval("Grp_ID") %>' />     
                                        <asp:CheckBox ID="CheckBoxSelect" runat="server"  AutoPostBack="True" class='<%#Eval("Grp_ID") %>'
                                            OnCheckedChanged="GroupCheckChanged" 
                                            meta:resourcekey="CheckBoxSelectResource1"  />            
                                  <b>  <asp:Label ID="Grp_NameLabel" runat="server" 
                                            Text="Select All" 
                                            meta:resourcekey="Grp_NameLabelResource1" />
                                            </b>

                                    </div>

                                  <br />
                                    <p>
                                    <asp:Panel ID="PanelGroupsItem" runat="server" Width="100%" 
                                            meta:resourcekey="PanelGroupsItemResource1" >
                                    <asp:Panel ID="MyGroups" runat="server" ScrollBars="Vertical" Height="300px" 
                                            Width="100%" Visible='<%# GetFlag(Convert.ToInt32(Eval("Grp_ID"))) %>' 
                                            meta:resourcekey="MyGroupsResource1">

                                        <asp:ListView ID="ListViewContactsInGrp" runat="server"  onitemdatabound="ListView1_ItemDataBound" >
                                        <LayoutTemplate>
                                            <table id="Table1" runat="server" style="width:100%;">
                                                <tr id="Tr1" runat="server">
                                                    <td id="Td1" runat="server">
                                                        <table ID="itemPlaceholderContainer" runat="server" border="0" style="width:100%;">
                                                            <tr id="Tr2" runat="server" style="">
                                                                <th id="Th1" runat="server" colspan="2" class="tSubHead2">
                                                                    Contacts</th>                                
                                                            </tr>
                                                            <tr ID="itemPlaceholder" runat="server">
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr id="Tr3" runat="server">
                                                    <td id="Td2" runat="server" style="">
                                                    </td>
                                                </tr>
                                            </table>
                                        </LayoutTemplate>
                                        <ItemTemplate>
                                         <tr style="">
                                                <td class="tListViewAlignment" style="width:10px">
                                                    <asp:CheckBox ID="chkFlag" runat="server" meta:resourcekey="chkFlagResource1" class='<%#Eval("grp_id") %>' />
                                                </td>                
                                                <td class="tListViewAlignment"><asp:Label ID="LabelContacts" runat="server" Text='<%# Eval("cont_name") %>' 
                                                        meta:resourcekey="LabelContactsResource1"></asp:Label>
                                                <asp:HiddenField ID="hfGSM" runat="server" Value='<%# Eval("cont_gsm") %>' />
                                                </td>
                                            </tr>
                                        </ItemTemplate>

                                        </asp:ListView>


                                       </asp:Panel>
                                    </asp:Panel>
                                      </p>
                                    <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
                                                Collapsed="True"
                                                TargetControlID="PanelGroupsItem"
                                                CollapseControlID="PanelHeaderList"
                                                ExpandControlID="PanelHeaderList"
                                                ImageControlID="Image1"
                                                ExpandedImage="~/micons/IC_minus.png"
                                                CollapsedImage="~/micons/IC_Plus.png"
                                                SuppressPostBack="True" Enabled="True">
                                    </asp:CollapsiblePanelExtender>
                                    </asp:Panel>
                                    </div>


                                    </ItemTemplate>
                                    <ItemStyle BorderColor="Silver" />
                                </asp:TemplateField>
                            </Columns>
                            <HeaderStyle BorderColor="Silver" />
                            <RowStyle BorderColor="Silver" />
                        </asp:GridView>

Answer 1

我认为你需要这样的东西：

function SelectCheckboxes(toCheck){
    $("#GridViewGroups input."+toCheck+":checkbox").each(function () {
        this.attr("checked", "checked");
    });
}

你这样称呼它：

OnClick(SelectCheckboxes("class_to_check");)

Answer 2

你可以用jQuery做这样的事情。

$("#gridviewID input[type='checkbox']").each(function () {
   $(this).prop('checked', true);
});

或者，如果您的所有复选框都具有相同的类

$(".checkboxClass").prop('checked', true);

Answer 3

如果您为联系人列表的每个复选框命名为：

<input type="checkbox" name="contacts" id="contact_id" />

选中所有复选框的主复选框：

<input type="checkbox" name="select_all" id="contact_id" onclick="checkAll(this.id)" />

您可以使用以下javascript函数：

 function checkAll(chkid) 
    {
        var chk = document.getElementById(chkid);

        var allchk = document.getElementsByName("contacts");
        for (var i = 0; i < allchk.length; i++) {
            allchk[i].checked = chk.checked;
        }
    }

使用此选项，当您选择“全选”复选框时，它将选择所有名为“联系人”的chekbox，如果取消选择“全选”，它将删除所选复选框。