用javascript操纵GridView中CheckBox的两个常用技巧
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>CheckBox</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="gdv" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input name="chk" type="checkbox" value="<%#Eval("ID")%>" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Author" HeaderText="Author" />
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="PostTime" HeaderText="PostTime" />
<asp:BoundField DataField="URL"
DataFormatString="<a href='{0}' target='_blank'>点击打开</a>"
HeaderText="Link" HtmlEncode="False" />
</Columns>
</asp:GridView>
<p>已选择的项：<input type="text" size="60" id="checked" /></p>
<p>要选择的项：<input type="text" size="60" id="checking" /><input type="button" value="选择" onclick="CheckThem()" id="Button1" /></p>
<p>当从上面GridView中选择或取消选择一项时，“已选择的项”中会自动更新为当前所有选中项的ID。</p>
<p>在“要选择的项”里填写要选择的项的ID（ID间用英文逗号分隔），点击“选择”可自动选中要选择的项。</p>
</form>
<script type="text/javascript">
//先获取到所有的checkbox再说
var chkList = document.getElementsByName("chk");
window.onload = function()
{
//为所有checkbox添加onclick事件处理，以自动更新“已选择的项”
for(var i=0; i<chkList.length; i++)
{
chkList[i].onclick = chkClick;
}
}
//checkbox的onclick事件，用于更新“已选择的项”
function chkClick()
{
var checkedList = "";
//获取所有被选中的项
for(var i=0; i<chkList.length; i++)
{
if(chkList[i].checked)
checkedList += chkList[i].value + ",";
}
//把选中项的列表显示到“已选择的项”中，substring在这里是为了去除最后一个逗号
document.getElementById("checked").value = checkedList.substring(0,checkedList.length-1);
}
//根据在“要选择的项”中的输入选中相应的项
function CheckThem()
{
var checkingList = document.getElementById("checking").value;
//没有输入就直接返回
if(checkingList.length==0){return;}
//获取所有想要选择项的ID
var checkingIds = checkingList.split(",");
//设置选择状态，注意两个循环的顺序，如果把chkList放到内层，将不能保证总是取得正确结果
//因为如果输入了多个ID，后面的ID会把前面的正确结果给冲掉
for(var j=0; j<chkList.length; j++)
{
for(var i=0; i<checkingIds.length; i++)
{
if(checkingIds[i] == chkList[j].value)
{
chkList[j].checked = true;
break;
}
else
{
chkList[j].checked = false;
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>CheckBox</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="gdv" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input name="chk" type="checkbox" value="<%#Eval("ID")%>" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Author" HeaderText="Author" />
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="PostTime" HeaderText="PostTime" />
<asp:BoundField DataField="URL"
DataFormatString="<a href='{0}' target='_blank'>点击打开</a>"
HeaderText="Link" HtmlEncode="False" />
</Columns>
</asp:GridView>
<p>已选择的项：<input type="text" size="60" id="checked" /></p>
<p>要选择的项：<input type="text" size="60" id="checking" /><input type="button" value="选择" onclick="CheckThem()" id="Button1" /></p>
<p>当从上面GridView中选择或取消选择一项时，“已选择的项”中会自动更新为当前所有选中项的ID。</p>
<p>在“要选择的项”里填写要选择的项的ID（ID间用英文逗号分隔），点击“选择”可自动选中要选择的项。</p>
</form>
<script type="text/javascript">
//先获取到所有的checkbox再说
var chkList = document.getElementsByName("chk");
window.onload = function()
{
//为所有checkbox添加onclick事件处理，以自动更新“已选择的项”
for(var i=0; i<chkList.length; i++)
{
chkList[i].onclick = chkClick;
}
}
//checkbox的onclick事件，用于更新“已选择的项”
function chkClick()
{
var checkedList = "";
//获取所有被选中的项
for(var i=0; i<chkList.length; i++)
{
if(chkList[i].checked)
checkedList += chkList[i].value + ",";
}
//把选中项的列表显示到“已选择的项”中，substring在这里是为了去除最后一个逗号
document.getElementById("checked").value = checkedList.substring(0,checkedList.length-1);
}
//根据在“要选择的项”中的输入选中相应的项
function CheckThem()
{
var checkingList = document.getElementById("checking").value;
//没有输入就直接返回
if(checkingList.length==0){return;}
//获取所有想要选择项的ID
var checkingIds = checkingList.split(",");
//设置选择状态，注意两个循环的顺序，如果把chkList放到内层，将不能保证总是取得正确结果
//因为如果输入了多个ID，后面的ID会把前面的正确结果给冲掉
for(var j=0; j<chkList.length; j++)
{
for(var i=0; i<checkingIds.length; i++)
{
if(checkingIds[i] == chkList[j].value)
{
chkList[j].checked = true;
break;
}
else
{
chkList[j].checked = false;
}
}
}
}
</script>
</body>
</html>
if (Page.IsPostBack==false )
{
//生成DataTable并添加相应的列
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("Author");
dt.Columns.Add("Title");
dt.Columns.Add("PostTime");
dt.Columns.Add("URL");
//测试数据填充
dt.Rows.Add(1, "张三", "JavaScript", "*************",
"http://www.baidu.com");
dt.Rows.Add(2, "李四", "突发奇想－－有关微软未来", "2008-05-11 09:59",
"http://www.baidu.com");
dt.Rows.Add(3, "王五", "可爱的google翻译，笑死我了", "2008-05-11 09:07 ",
"http://www.baidu.com");
dt.Rows.Add(4, "赵六", "模板修改后重新发布", "2008-04-26 07:22",
"http://www.baidu.com");
dt.Rows.Add(5, "孙七", "", "2008-04-26 07:22",
"http://www.baidu.com");
//将DataTable绑定到GridView
gdv.DataSource = dt;
gdv.DataBind();
}
{
//生成DataTable并添加相应的列
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("Author");
dt.Columns.Add("Title");
dt.Columns.Add("PostTime");
dt.Columns.Add("URL");
//测试数据填充
dt.Rows.Add(1, "张三", "JavaScript", "*************",
"http://www.baidu.com");
dt.Rows.Add(2, "李四", "突发奇想－－有关微软未来", "2008-05-11 09:59",
"http://www.baidu.com");
dt.Rows.Add(3, "王五", "可爱的google翻译，笑死我了", "2008-05-11 09:07 ",
"http://www.baidu.com");
dt.Rows.Add(4, "赵六", "模板修改后重新发布", "2008-04-26 07:22",
"http://www.baidu.com");
dt.Rows.Add(5, "孙七", "", "2008-04-26 07:22",
"http://www.baidu.com");
//将DataTable绑定到GridView
gdv.DataSource = dt;
gdv.DataBind();
}
浙公网安备 33010602011771号