GridView中的CheckBox选中 (JQuery)
JQuery验证GridView中是否有CheckBox被选中
在GirdView中使用CheckBox,通常我们使用后台代码的方式判断是否至少有一个CheckBox是选中的状态。但是,这种验证在客户端的脚本中将更加容易实现,而且,页面的效果也非常好。网上有很多解决方案,以下提供我的解决方案,部分代码来源网上,经过我的修改和测试,很好用。“拿来主义”,忘了代码是在哪找到的,希望原作者谅解。
这是主要的实现代码:
<script type="text/javascript" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var gridView1Control = document.getElementById('<%= GridView1.ClientID %>'); var DataKeyName = " "; //Get all of the checked item in the GridView $('#<%= cmdGetData.ClientID %>').click(function (e) { //alert($('input:checkbox[id*=chkSelect]:checked').size()); var DataKeyName = ""; $('input:checkbox[id*=chkSelect]:checked', gridView1Control).each(function (item, index) { if (DataKeyName == "") { DataKeyName = $(this).next('input:hidden[id*=IDVal]').val(); } else { DataKeyName += "," + $(this).next('input:hidden[id*=IDVal]').val(); } }); if ( DataKeyName == "" || DataKeyName ==","){ alert("No items are checked!"); } else{ alert(DataKeyName); } return false; }); }); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Gridview CheckBox</title> <script type="text/javascript" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var gridView1Control = document.getElementById('<%= GridView1.ClientID %>'); var DataKeyName = " "; //Get all of the checked item in the GridView $('#<%= cmdGetData.ClientID %>').click(function (e) { //alert($('input:checkbox[id*=chkSelect]:checked').size()); var DataKeyName = ""; $('input:checkbox[id*=chkSelect]:checked', gridView1Control).each(function (item, index) { if (DataKeyName == "") { DataKeyName = $(this).next('input:hidden[id*=IDVal]').val(); } else { DataKeyName += "," + $(this).next('input:hidden[id*=IDVal]').val(); } }); if ( DataKeyName == "" || DataKeyName ==","){ alert("No items are checked!"); } else{ alert(DataKeyName); } return false; }); }); </script> </head> <body> <form id="form1" runat="server"> <div style=" text-align:center;"> <h1>Gridview using CheckBox</h1> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" HorizontalAlign="Center" > <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" /> <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("ID") %>' /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <HeaderTemplate> Name </HeaderTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:Button ID="cmdGetData" runat="server" Text="Get Data" /> </div> </form> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim dt As New DataTable() dt.Columns.Add("ID") dt.Columns.Add("Name") Dim oItem As DataRow oItem = dt.NewRow() oItem.Item("ID") = "1" oItem.Item("Name") = "Shawpnendu Bikash Maloroy" dt.Rows.Add(oItem) oItem = dt.NewRow() oItem.Item("ID") = "2" oItem.Item("Name") = "Bimalendu Bikash Maloroy" dt.Rows.Add(oItem) oItem = dt.NewRow() oItem.Item("ID") = "3" oItem.Item("Name") = "Purnendu Bikash Maloroy" dt.Rows.Add(oItem) GridView1.DataSource = dt GridView1.DataBind() End Sub
希望本篇文章对你有用
Happy Programming!!!