GridView中的CheckBox选中（JQuery）

来源：互联网发布：橙子网络编辑：程序博客网时间：2024/06/12 01:32

GridView中的CheckBox选中（JQuery）

作者：Dannier | 出处：博客园 | 2012/4/19 10:55:32 | 阅读73次

JQuery验证GridView中是否有CheckBox被选中

　　　　在GirdView中使用CheckBox,通常我们使用后台代码的方式判断是否至少有一个CheckBox是选中的状态。但是，这种验证在客户端的脚本中将更加容易实现，而且，页面的效果也非常好。网上有很多解决方案，以下提供我的解决方案，部分代码来源网上，经过我的修改和测试，很好用。“拿来主义”，忘了代码是在哪找到的，希望原作者谅解。

这是主要的实现代码：

<script type="text/javascript" language="javascript" src="http://archive.cnblogs.com/a/Scripts/jquery-1.4.1.min.js" rel="nofollow"/>$(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>

html

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Gridview CheckBox</title><script type="text/javascript" language="javascript" src="http://archive.cnblogs.com/a/Scripts/jquery-1.4.1.min.js" rel="nofollow"/>$(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>

vb.net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadDim dt As New DataTable()dt.Columns.Add("ID")dt.Columns.Add("Name")Dim oItem As DataRowoItem = 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 = dtGridView1.DataBind()End Sub

希望本篇文章对你有用

Happy Programming!!!

GridView中的CheckBox选中 （JQuery）

GridView中的CheckBox选中 （JQuery）

GridView中的CheckBox选中（JQuery）

GridView中的CheckBox选中（JQuery）