我正在使用gridview的從here中選擇所有複選框功能。這裏使用的腳本有一個問題。Gridview檢查所有複選框問題
如果我選中標題複選框,則選中所有模板(行)複選框。如果我然後取消選擇所有的模板checbox,標題checbox仍然保持檢查。在這種情況下如何取消選擇標題複選框?
請指教!
我正在使用gridview的從here中選擇所有複選框功能。這裏使用的腳本有一個問題。Gridview檢查所有複選框問題
如果我選中標題複選框,則選中所有模板(行)複選框。如果我然後取消選擇所有的模板checbox,標題checbox仍然保持檢查。在這種情況下如何取消選擇標題複選框?
請指教!
首先,我會添加一個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庫。
這是.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 + "')");
}
}