Gridview检查所有复选框问题答案

【问题标题】：Gridview Checking all checkboxes issueGridview检查所有复选框问题
【发布时间】：2011-11-03 18:31:01
【问题描述】：

我正在使用来自here 的gridview 的全选复选框功能。这里使用的脚本有一个问题。

如果我选择标题复选框，则所有模板（行）复选框都会被选中。如果我随后取消选择所有模板复选框，则标题复选框仍处于选中状态。在这种情况下如何取消选中标题复选框？

请指教！

【问题讨论】：

标签： javascript asp.net visual-studio gridview checkbox

【解决方案1】：

首先，我会在CheckBox1 中添加一个Css 类，以供以后使用class="chk-all"。

然后，在 ItemTemplate 复选框中添加一个 javascript 函数。

<ItemTemplate>
    <asp:CheckBox ID="CheckBox1" runat="server" onclick="UnselectAllOption()"  />
</ItemTemplate>

然后，使用一些 jQuery 选择具有class="chk-all" 的复选框。

function UnselectAllOption(){  
    $('.chk-all').attr("checked", false");  
}

只要单击其他复选框之一，我就会将其设置为未选中，因为要么未选中，而您选择的是单个复选框，因此不应选中 HeaderTemplate 中的复选框。或者所有复选框都已选中，这意味着不应选中 HeaderTemplate 中的复选框，因为您正在将其他复选框更改为不选中。

编辑

附言此答案要求您添加对 jQuery javascript 库的脚本引用。

【讨论】：

【解决方案2】：

这是 .NET 方式，但是 jQuery 解决方案更简洁：

脚本：

 function resetParent(parentRow)
 {
    document.getElementById(parentRow).checked = false;
 }

标记：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    Caption="Pick Some Technologies" BackColor="White" BorderColor="#CC9966" OnRowDataBound="ObjectDataSource1__RowDataBound"
    BorderStyle="None" BorderWidth="1px" CellPadding="4">
    <Columns>
    <asp:TemplateField HeaderText="Include" SortExpression="Include">
        <HeaderTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" onclick="changeAllCheckBoxes(this)" />
        </HeaderTemplate>
        <ItemTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" />
        </ItemTemplate>
        <ItemStyle HorizontalAlign="Center" />
    </asp:TemplateField>
    <asp:BoundField DataField="Name" HeaderText="Technology" />
    </Columns>
    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>

代码隐藏：

private CheckBox parentCheckBox = null;
protected void ObjectDataSource1__RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        parentCheckBox = (CheckBox)e.Row.FindControl("CheckBox1");
    }    

    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox childCheckBox = (CheckBox)e.Row.FindControl("CheckBox1");
        childCheckBox.Attributes.Add("onclick","resetParent('" + parentCheckBox.ClientID + "')");
    }
}

【讨论】：