GridView中的CheckBox选中（JQuery）

最新推荐文章于 2019-01-12 16:54:43 发布

happymagic

最新推荐文章于 2019-01-12 16:54:43 发布

阅读量2.1k

点赞数

分类专栏： jQuery ASP.NET

ASP.NET 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

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.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!!!

happymagic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GridView中的CheckBox选中（JQuery）

GridView中的CheckBox选中（JQuery）作者：Dannier | 出处：博客园 | 2012/4/19 10:55:32 | 阅读73次-JQuery验证GridView中是否有CheckBox被选中　　　　在GirdView中使用CheckBox,通常我们使用后台代码的方式判断是否至少有一个CheckBox是选中的状态。但是，这种验证在客户端的脚本中
复制链接

扫一扫