如何实现gridview中 checkbox 多选限制,最多选择5项。
发布网友
发布时间：2022-04-27 12:22
共5个回答
懂视网
时间：2022-04-27 16:43
代码如下:
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
// 计算数据，完全可以从数据看取得
ICollection CreateDataSource()
{
System.Data.DataTable dt =new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("序号", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));
for (int i =0; i <8; i++)
{
System.Random rd =new System.Random(Environment.TickCount * i); ;
dr = dt.NewRow();
dr[0] = i.ToString();
dr[1] ="【孟子】"+ i.ToString();
dr[2] = System.Math.Round(rd.NextDouble() *100, 2);
dr[3] = System.Math.Round(rd.NextDouble() *100, 2);
dr[4] = System.Math.Round(rd.NextDouble() *100, 2);
dr[5] = System.Math.Round(rd.NextDouble() *100, 2);
dt.Rows.Add(dr);
}
System.Data.DataView dv =new System.Data.DataView(dt);
return dv;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView2.DataSource = GridView1.DataSource = CreateDataSource();
GridView2.DataBind();
GridView1.DataBind();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Ret1.Text ="";
foreach (GridViewRow gvr in GridView1.Rows)
{
CheckBox ch = (CheckBox)gvr.FindControl("ItemCheckBox");
if (ch.Checked)
{
Ret1.Text +="<li>GridView1 您选择的是（键值）："+ GridView1.DataKeys[gvr.DataItemIndex].Value.ToString();
}
}
}
protected void Button2_Click(object sender, EventArgs e)
{
Ret2.Text ="";
foreach (GridViewRow gvr in GridView2.Rows)
{
CheckBox ch = (CheckBox)gvr.FindControl("ItemCheckBox");
if (ch.Checked)
{
Ret2.Text +="<li>GridView2 您选择的是（键值）："+ GridView2.DataKeys[gvr.DataItemIndex].Value.ToString();
}
}
}
protected void CheckAll(object sender, EventArgs e)
{
CheckBox cbx = (CheckBox)sender;
foreach (GridViewRow gvr in GridView1.Rows)
{
CheckBox ch = (CheckBox)gvr.FindControl("ItemCheckBox");
ch.Checked = cbx.Checked;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GridView 实现服务器端和客户端全选的两种方法</title>
<script type="text/javascript">
//<![CDATA[
function CheckAll(oCheckbox)
{
var GridView2 = document.getElementById("<%=GridView2.ClientID %>");
for(i =1;i < GridView2.rows.length; i++)
{
GridView2.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;
}
}
//]]>
</script>
</head>
<body>
<form id="Form1" runat="server">
<table style="width:800px;font-size:12px;">
<tr valign="top">
<td>
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" DataKeyNames="序号" AutoGenerateColumns="false">
<HeaderStyle BackColor="#EDEDED" Height="26px"/>
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Text="全选" AutoPostBack="true" OnCheckedChanged="CheckAll"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="ItemCheckBox" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="学生姓名" HeaderText="学生姓名"/>
<asp:BoundField DataField="语文" HeaderText="语文"/>
<asp:BoundField DataField="数学" HeaderText="数学"/>
<asp:BoundField DataField="英语" HeaderText="英语"/>
<asp:BoundField DataField="计算机" HeaderText="计算机"/>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="得到选择的行值"/>
</td>
<td align="right">
<asp:GridView ID="GridView2" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" DataKeyNames="序号" AutoGenerateColumns="false">
<HeaderStyle BackColor="#EDEDED" Height="26px"/>
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input id="Checkbox2" type="checkbox" onclick="CheckAll(this)" runat="server"/><label>全选</label>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="ItemCheckBox" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="学生姓名" HeaderText="学生姓名"/>
<asp:BoundField DataField="语文" HeaderText="语文"/>
<asp:BoundField DataField="数学" HeaderText="数学"/>
<asp:BoundField DataField="英语" HeaderText="英语"/>
<asp:BoundField DataField="计算机" HeaderText="计算机"/>
</Columns>
</asp:GridView>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="得到选择的行值"/>
</td>
</tr>
<tr valign="top">
<td>
<asp:Literal ID="Ret1" runat="server"></asp:Literal>
</td>
<td align="right">
<asp:Literal ID="Ret2" runat="server"></asp:Literal>
</td>
</tr>
</table>
</form>
</body>
</html>
热心网友
时间：2022-04-27 13:51
function CheckAll()
{
var a = document.getElementsByTagName("input");
for (var i=0; i<a.length; i++)
if (a[i].type == "checkbox")
{
a[i].checked =true;
}
}
/*反选*/
function NoCheckAll()
{
var a = document.getElementsByTagName("input");
for (var i=0; i<a.length; i++)
if (a[i].type == "checkbox")
{
a[i].checked =false;
}
}
/*验证选择个数*/
function CheckIsSelect(objGrid)
{
//检测是否有选择多选框的至少一项
chs = document.getElementById(objGrid).getElementsByTagName("input");
n = 0;
for( i = 0; i<chs.length; i++ )
{
if(chs[i].checked)
{
n++;
}
}
if( n == 0 )
{
alert("至少选择一项!");
return false;
}
return true;
}
改改这个JS就行了
热心网友
时间：2022-04-27 15:09
热心网友
时间：2022-04-27 16:44
1、前台用JS判断
2、后台代码判断
热心网友
时间：2022-04-27 18:35
js代码：
function validateIsChecked()
{
var gridview1 = document.getElementById("<%=GridView1.ClientID %>");
var chbAudit ;
var checkedCount = 0;
for(var i = 2 ; i < gridview1.rows.length + 1 ; i++)
{
if(i<10)
{
chbAudit = document.getElementById("GridView1$ctl0" + i + "$audit");
}
else
{
chbAudit = document.getElementById("GridView1$ctl" + i + "$audit") != null ? document.getElementById("GridView1$ctl" + i + "$audit"):'null';
}
if(chbAudit.type == "checkbox")
{
if(chbAudit.checked==true)
{
checkedCount++;
}
}
else
{
break;
}
}
if(checkedCount>5)
{
var evt = window.event || evt;
var obj = evt.srcElement || evt.target;
obj.checked = false;
//在这里再遍历一遍gridview 如果checkbox没有被选中就变为不可用
for(var i = 2 ; i < gridview1.rows.length + 1 ; i++)
{
if(i<10)
{
chbAudit = document.getElementById("GridView1$ctl0" + i + "$audit");
}
else
{
chbAudit = document.getElementById("GridView1$ctl" + i + "$audit") != null ? document.getElementById("GridView1$ctl" + i + "$audit"):'null';
}
if(chbAudit.type == "checkbox")
{
if(chbAudit.checked==false)
{
chbAudit.enabled= false
}
}
alert("对不起,最多只能选择5项!");
}
}
注：其中的("GridView1$ctl" + i + "$audit")为每一行CheckBox的客户端id，可以打开浏览器，在页面上点击右键->查看源代码获得。
CheckBox控件代码：
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource2" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="uname" HeaderText="uname" SortExpression="uname" />
<asp:BoundField DataField="sex" HeaderText="sex" SortExpression="sex" />
<asp:BoundField DataField="date" HeaderText="date" SortExpression="date" />
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox runat="server" ID="audit" onclick = "validateIsChecked()" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
