用javascript操纵GridView中CheckBox的两个常用技巧
2010-09-14 13:16:59 来源：WEB开发网然是为了解决GridView中的CheckBox操纵问题，但实际上功能并不仅限于GridView中，稍加改动就可以用到其他的场景，甚至都不用改动（不知道有没有这么好糊弄的客户）
代码依然帖在下面，比上一篇 用javascript/css实现GridView行背景色交替、点击行变色 长了很多，不过我感觉注释依然足够详细，所以也应该很容易理解，可以把下面两个文件的代码直接复制到你的项目中直接执行。最下面有文件的下载地址，可以直接下载后运行，代码在IE7和Firefox2下测试通过，有任何问题，请在下面留言，我将尽量及时回复。
CheckBox.aspx
主要包含一个GridView，里面包含了我们要折腾的CheckBox，还有一大~~~~堆的javascript，当然也还是我们折腾的重要手段，只是目标基本已经换成了GridView中的CheckBox，和GridView本身并没有太大关系
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBox.aspx.cs" Inherits="CheckBox" %>
<!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 runat="server">
<title>CheckBox</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="gvMeiMingZi" 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()" /></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>
Tags：javascript 操纵 GridView
编辑录入：爽爽 [复制链接] [打 印]
中查找“用javascript操纵GridView中CheckBox的两个常用技巧”更多相关内容
中查找“用javascript操纵GridView中CheckBox的两个常用技巧”更多相关内容更多精彩
赞助商链接
