用Javascript操纵GridView中CheckBox的两个常用技巧

http://developer.51cto.com 2008-05-19 16:40 丁学博客园我要评论(0)

摘要：这篇文章同样是为了解决一个博问中的提问：提问：关于JS读取gridview,checkbox选择情况。当然，下面的实现中，有一半是为解决这个问题而做的，另一半是很久前帮另一位朋友做的，同样关于Javascript对GridView中的CheckBox的操作，只是操作顺序完全反过来了，不是获取所有选择的项，而是根据用户的输入，自动选择选择相应的项。
标签：Javascript CheckBox GridView 技巧

这篇文章同样是为了解决一个博文中的提问：关于JS读取gridview,checkbox选择情况。当然，下面的实现中，有一半是为解决这个问题而做的，另一半是很久前帮另一位朋友做的，同样关于Javascript对GridView中的CheckBox的操作，只是操作顺序完全反过来了，不是获取所有选择的项，而是根据用户的输入，自动选择选择相应的项。

虽然是为了解决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>

CheckBox.aspx.cs
还是用来生成测试数据的，不然前面的GridView里没东西，就没得折腾了

using System;
using System.Data;
public partial class CheckBox:System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//生成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/css实现GridView行背景色交替、点击行变色",
"*************",
"**********************************************************************");
dt.Rows.Add(1, "丁学", "突发奇想－－有关微软未来", "2008-05-11 09:59",
"http://www.cnblogs.com/dingxue/archive/2008/05/11/1191936.html");
dt.Rows.Add(2, "丁学", "可爱的google翻译，笑死我了", "2008-05-11 09:07 ", 
"http://www.cnblogs.com/dingxue/archive/2008/05/11/1191900.html");
dt.Rows.Add(3, "丁学", "模板修改后重新发布", "2008-04-26 07:22", 
"http://www.cnblogs.com/dingxue/archive/2008/04/26/1171778.html");
dt.Rows.Add(4, "丁学", "想买啥 VS 买了啥！理想与现实的差距咋就这么大咧?", "2008-04-13 
07:39",
"http://www.cnblogs.com/dingxue/archive/2008/04/13/1150952.html");
dt.Rows.Add(5, "丁学", "XHTML/CSS记忆力大测试，两项都超过我，我请你吃饭！", "2008-04-03
06:40",
"http://www.cnblogs.com/dingxue/archive/2008/04/03/xhtml_css_test.html");
dt.Rows.Add(6, "丁学", "Designer VS Coder, who is the winner?", "2008-03-26 07:44", 
"http://www.cnblogs.com/dingxue/archive/2008/03/26/coder_vs_designer.html");
dt.Rows.Add(7, "丁学", "用DIV模拟弹出窗口－－窗体滚动跟随－－丁学", "2007-09-03 08:42", 
"http://www.cnblogs.com/dingxue/archive/2007/09/03/879654.html");
dt.Rows.Add(8, "丁学", "一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现", 
"2007-08-09 07:12",
"http://www.cnblogs.com/dingxue/archive/2007/08/09/848555.html");
dt.Rows.Add(9, "丁学", "关于IE7关闭窗口时总是提示和上传图片前的本地预览解决办法", 
"2007-06-19 08:50",
"http://www.cnblogs.com/dingxue/archive/2007/06/19/788449.html");
dt.Rows.Add(10, "丁学", "IE对input元素onchange事件的支持BUG", "2007-03-23 07:54",
"http://www.cnblogs.com/dingxue/archive/2007/03/23/684807.html");
dt.Rows.Add(11, "丁学", "由验证控件引起的IE的超级爆笑BUG", "2007-03-22 07:35", 
"http://www.cnblogs.com/dingxue/archive/2007/03/22/683401.html");
dt.Rows.Add(12, "丁学", "DIV中滚动条设置到随机位置(CSS+Javascript)", "2007-03-18 12:17", 
"http://www.cnblogs.com/dingxue/archive/2007/03/18/678839.html");
dt.Rows.Add(13, "丁学", "ASP.NET AJAX1.0尝鲜试用：Web Service调用", "2007-03-17 17:36",
"http://www.cnblogs.com/dingxue/archive/2007/03/17/678383.html");
dt.Rows.Add(14, "丁学", "ASP.NET中利用利用Skin引入CSS的问题", "2007-03-17 17:30",
"http://www.cnblogs.com/dingxue/archive/2007/03/17/678374.html");
//将DataTable绑定到GridView
gvMeiMingZi.DataSource = dt;
gvMeiMingZi.DataBind();
}
}