使用 JQuery 选中取消选中 Gridview 中的所有复选框答案

【问题标题】：Check Uncheck All Checkboxes in Gridview Using JQuery使用 JQuery 选中取消选中 Gridview 中的所有复选框
【发布时间】：2014-11-01 16:41:57
【问题描述】：

使用 JQuery 选中取消选中 Gridview 中的所有复选框

查看更多：C# ASP.NET jQuery

单击标题复选框时，此处所有复选框均无效

     <script type="text/javascript" language="javascript">
     function CheckAll(Checkbox) {
     var GridView1 = document.getElementById("<%=GridView1.ClientID %>");
     for (i = 1; i < GridView1.rows.length; i++) {
      GridView1.rows[i].cells[3].getElementsByTagName("INPUT")[0].checked       =Checkbox.checked;
       }}

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="624px" CssClass="grid" 
        AllowPaging="True" AllowSorting="True" BackColor="White"  OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit"
        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" PageSize = "5" 
        OnRowUpdating="GridView1_RowUpdating" DataKeyNames="id">         
            <Columns>
            <asp:TemplateField>
                &lt;HeaderTemplate>
        <asp:CheckBox ID="chkHeader" runat="server" onclick="CheckAll(this)"/>
            &lt;/HeaderTemplate>
            <ItemTemplate>
            <asp:CheckBox ID="chkchild" runat="server" />
            </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" InsertVisible="False" ReadOnly="True" />
                <asp:BoundField DataField="updatedby" HeaderText="updatedby" SortExpression="updatedby" />
            <asp:BoundField DataField="username" HeaderText="username" SortExpression="username" />
            <asp:BoundField DataField="password" HeaderText="password" SortExpression="password" />
            <asp:BoundField DataField="mail" HeaderText="mail" SortExpression="mail" />
 <asp:BoundField DataField="imagename" HeaderText="imagename" SortExpression="imagename" />
            <asp:ImageField DataImageUrlField="uploadimage" HeaderText="uploadimage" ControlStyle-Width = "80" ControlStyle-Height = "100">
            <ControlStyle Height="100px" Width="80px"></ControlStyle>
            </asp:ImageField>
     <asp:CommandField ShowEditButton="True" />
        </Columns>  
   </asp:GridView>

【问题讨论】：

标签： c# jquery asp.net

【解决方案1】：

checked 是 bool 类型的属性。

你应该给它分配true或false：

GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = true;

根据aspx 代码，您的单元格值也应为0。

【讨论】：

【解决方案2】：

改变这一行：

GridView1.rows[i].cells[3].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;

有了这个

GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;

【讨论】：

【解决方案3】：

（如果你提供了渲染的 HTML 会更容易）

$(function() {
    // Get your GridView, to restrict the "check/uncheck all" action only to this GridView (and don't mess up with another controllers in the page)
    var MainGridView = $('#GridView1');  // Set your GridView's Id

    // Bind Your Button to Check All CheckBoxes (Set the Id, or whatever CSS selector to match your CHECK ALL CHECKBOXES button)
    // This CSS selector applied to your needs will be '#chkHeader'. (Use only this piece of code, and do not bind the uncheck to this control too, otherwise it will check and uncheck all everytime)
    $('#ButtonCheckAllCheckBoxes').click(
        function () {
            MainGridView.find("input[type='checkbox']").prop('checked', true);
        }
    );


    // Bind Your Button to Uncheck All CheckBoxes (Set the Id, or whatever CSS selector to match your UNCHECK ALL CHECKBOXES button)
    $('#ButtonUncheckAllCheckBoxes').click(
        function () {
            MainGridView.find("input[type='checkbox']").prop('checked', false);
        }
    );
});

【讨论】：