2011-08-25 99 views
1

我正在使用gridview的從here中選擇所有複選框功能。這裏使用的腳本有一個問題。Gridview檢查所有複選框問題

如果我選中標題複選框,則選中所有模板(行)複選框。如果我然後取消選擇所有的模板checbox,標題checbox仍然保持檢查。在這種情況下如何取消選擇標題複選框?

請指教!

回答

1

首先,我會添加一個Css類到CheckBox1以供以後使用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中的複選框不應該被檢查,因爲您正在更改其中一個複選框而不被檢查。

編輯

附:此答案要求您將腳本引用添加到jQuery JavaScript庫。

1

這是.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 + "')"); 
    } 
}