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