js控制gridview 中的checkbox 全选

最新推荐文章于 2021-11-05 17:27:57 发布

原创最新推荐文章于 2021-11-05 17:27:57 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #server #function #asp #button #object

这篇博客介绍了如何在ASP.NET的GridView控件中实现全选复选框的功能，并通过JavaScript函数`checkAll()`控制子项复选框状态。同时，展示了批删除按钮的客户端验证函数`clientValid()`，在用户点击批删除前确认是否有记录被选中。如果存在选中记录，会弹出确认删除的对话框；否则提示用户选择要删除的记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<asp:Button ID="BtnDel" runat="server" Text="批删除"
onclick="BtnDel_Click" onclientclick="return clientValid()"/>

<asp:GridView ID="GridView1" runat="server"
               AutoGenerateColumns="False" DataKeyNames="id"
         CellPadding="4" Width="100%"   ForeColor="#333333"
                                AllowPaging="True" onpageindexchanging="GridView1_PageIndexChanging"
                                onrowcreated="GridView1_RowCreated">
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <input id="Checkbox2" type="checkbox" runat="server"/>
                </ItemTemplate>
                <HeaderTemplate>
                    <input id="Checkbox1" type="checkbox" onclick="checkAll(this)" />全选
                </HeaderTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:BoundField DataField="CODE" HeaderText="工号" />

</Columns>
           <RowStyle BackColor="#EFF3FB" />
                            <EditRowStyle BackColor="#2461BF" />
                            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            <AlternatingRowStyle BackColor="White" />
    </asp:GridView>

后台事件：

protected void BtnDel_Click(object sender, EventArgs e)
{

       for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            HtmlInputCheckBox chk = (HtmlInputCheckBox)GridView1.Rows[i].FindControl("Checkbox2");
            if(chk.Checked)
            {
                ++j;
                string key = GridView1.DataKeys[i].Value.ToString();
                ……// 在此对数据进行操作

}
}

}

点击全选按钮后，执行脚本程序 :checkAll()

点击批删除按钮后，会先判断一下是否有有记录被选中，如果有，则会弹出”是否要删除“的对话框，如果没有选中记录，则会弹出提标"请选择要删除的记录" 当gridview中的记录为为空时，会"没有可供操作的记录"对话框弹出,其中 onclientclick="return clientValid()" 中的 return 很重要，测试的时候，如是没有return 不论返回的是true或false onclick中的服务器事件(BtnDel_Click())都会执行。