Question

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

如果我选择标题复选框，则会选中所有模板（行）复选框。如果我然后取消选择所有模板checbox，标题checbox仍然保持选中状态。在这种情况下如何取消选中标题复选框？

请指教！

Answer 1

首先，我会向CheckBox1添加一个Css类，以便稍后使用class="chk-all"。

然后，将一个javascript函数添加到ItemTemplate复选框。

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

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

的复选框

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

只要单击其中一个复选框，我就会将其设置为取消选中，因为未选中任何一个并且您选择的是一个，因此不应选中HeaderTemplate中的复选框。或者已经选中了所有复选框，这意味着不应该检查HeaderTemplate中的那个复选框，因为您正在将其他复选框更改为未被检查。

修改

P.S。这个答案要求您添加一个脚本引用到jQuery javascript库。

Answer 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 + "')");
    }
}

Gridview检查所有复选框问题

2 个答案: