JS全选，复选框是.net服务器控件checkBox 在GridView中的模板列
2009-10-26 22:00
603 查看
<%@ Page Language= "C# " %>
<%@ Import Namespace= "System.Data " %>
<%--http://community.csdn.net/Expert/TopicView3.asp?id=5714048--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script runat= "server ">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
LoadProductData();
}
}
void LoadProductData()
{
DataTable dt = CreateSampleProductData();
GridView1.DataSource = dt;
GridView1.DataBind();
}
#region sample data
static DataTable CreateSampleProductData()
{
DataTable tbl = new DataTable( "Products ");
tbl.Columns.Add( "ProductID ", typeof(int));
tbl.Columns.Add( "ProductName ", typeof(string));
tbl.Columns.Add( "UnitPrice ", typeof(decimal));
tbl.Columns.Add( "CategoryID ", typeof(int));
tbl.Rows.Add(1, "Chai ", 18, 1);
tbl.Rows.Add(2, "Chang ", 19, 1);
tbl.Rows.Add(3, "Aniseed Syrup ", 10, 2);
tbl.Rows.Add(4, "Chef Anton 's Cajun Seasoning ", 22, 2);
tbl.Rows.Add(5, "Chef Anton 's Gumbo Mix ", 21.35, 2);
tbl.Rows.Add(47, "Zaanse koeken ", 9.5, 3);
tbl.Rows.Add(48, "Chocolade ", 12.75, 3);
tbl.Rows.Add(49, "Maxilaku ", 20, 3);
return tbl;
}
#endregion
</script>
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head runat= "server ">
<title> CSDN_GridViewAllAndRowCheckBox </title>
<script type= "text/javascript ">
// 选择 GridView 中指定的 checkbox
function chkAll(sender)
{
var grd = document.getElementById( "GridView1 ");
var chkArr = grd.getElementsByTagName( "input ");
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkItem ") > -1) {
chkArr[i].checked = sender.checked;
}
}
}
// 同步chkItem和chkAll
function chkItem(sender)
{
var grd = document.getElementById( "GridView1 ");
var chkArr = grd.getElementsByTagName( "input ");
var chkAll;
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkAll ") > -1) {
chkAll = chkArr[i];
break;
}
}
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkItem ") > -1 &&
!chkArr[i].checked) {
chkAll.checked = false;
return;
}
}
chkAll.checked = true;
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div>
<asp:GridView ID= "GridView1 " runat= "server " AutoGenerateColumns= "false ">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID= "chkAll " onclick= 'chkAll(this) ' runat= "server " />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID= "chkItem " onclick= 'chkItem() ' runat= "server " />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText= "ProductName ">
<ItemTemplate>
<%# Eval( "ProductName ") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField= "UnitPrice " HeaderText= "UnitPrice " />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
<%@ Import Namespace= "System.Data " %>
<%--http://community.csdn.net/Expert/TopicView3.asp?id=5714048--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script runat= "server ">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
LoadProductData();
}
}
void LoadProductData()
{
DataTable dt = CreateSampleProductData();
GridView1.DataSource = dt;
GridView1.DataBind();
}
#region sample data
static DataTable CreateSampleProductData()
{
DataTable tbl = new DataTable( "Products ");
tbl.Columns.Add( "ProductID ", typeof(int));
tbl.Columns.Add( "ProductName ", typeof(string));
tbl.Columns.Add( "UnitPrice ", typeof(decimal));
tbl.Columns.Add( "CategoryID ", typeof(int));
tbl.Rows.Add(1, "Chai ", 18, 1);
tbl.Rows.Add(2, "Chang ", 19, 1);
tbl.Rows.Add(3, "Aniseed Syrup ", 10, 2);
tbl.Rows.Add(4, "Chef Anton 's Cajun Seasoning ", 22, 2);
tbl.Rows.Add(5, "Chef Anton 's Gumbo Mix ", 21.35, 2);
tbl.Rows.Add(47, "Zaanse koeken ", 9.5, 3);
tbl.Rows.Add(48, "Chocolade ", 12.75, 3);
tbl.Rows.Add(49, "Maxilaku ", 20, 3);
return tbl;
}
#endregion
</script>
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head runat= "server ">
<title> CSDN_GridViewAllAndRowCheckBox </title>
<script type= "text/javascript ">
// 选择 GridView 中指定的 checkbox
function chkAll(sender)
{
var grd = document.getElementById( "GridView1 ");
var chkArr = grd.getElementsByTagName( "input ");
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkItem ") > -1) {
chkArr[i].checked = sender.checked;
}
}
}
// 同步chkItem和chkAll
function chkItem(sender)
{
var grd = document.getElementById( "GridView1 ");
var chkArr = grd.getElementsByTagName( "input ");
var chkAll;
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkAll ") > -1) {
chkAll = chkArr[i];
break;
}
}
for(var i = 0; i < chkArr.length; i++) {
if(chkArr[i].type == "checkbox " &&
chkArr[i].id.indexOf( "chkItem ") > -1 &&
!chkArr[i].checked) {
chkAll.checked = false;
return;
}
}
chkAll.checked = true;
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div>
<asp:GridView ID= "GridView1 " runat= "server " AutoGenerateColumns= "false ">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID= "chkAll " onclick= 'chkAll(this) ' runat= "server " />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID= "chkItem " onclick= 'chkItem() ' runat= "server " />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText= "ProductName ">
<ItemTemplate>
<%# Eval( "ProductName ") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField= "UnitPrice " HeaderText= "UnitPrice " />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- asp.net GridView控件中模板列CheckBox全选、反选、取消
- asp.net GridView控件中模板列CheckBox全选、反选、取消
- GridView控件中模板列CheckBox全选、反选、取消
- GridView控件中模板列CheckBox全选、反选、取消实现代码
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- GridView控件中模板列CheckBox全选、反选、取消实现代码
- DEV控件中GridView中的复选框与CheckBox实现联动的全选功能
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- js实现checkbox复选框全选/全不选
- js控制Gridview中的checkbox全选
- JS实现CheckBox复选框全选全不选功能
- js控制Gridview中的checkbox全选(转)
- 复选框（checkbox）全选--js代码
- C# GridView列头添加CheckBox控件实现全选功
- js调用.net后台事件，和后台调用前台等方法以及js调用服务器控件的方法
- JS复选框checkbox：父复选框全选全取消子选框和子选框选则而父选框自动选中的代码
- js在repeater控件内每一行<input type="checkbox"/>实现全选，全不选，然后获取每一行的ID删除
- js调用.NET服务器控件及C#后台方法
- 前台js 2种 全选和不全选checkbox复选框
- JS控制TreeView的CheckBox控件的全选与全不选脚本