全选DataGrid里的复选框

我们经常会在DataGrid里选择一组数据,然后批量操作,如果要全部操作的话需要一个全选的功能,如果你用这个全选按钮的服务器端事件来让DataGrid里复选框的全选的话,会多一次向服务器的回传,我们可以写一个js函数来简化这一步骤.
其实DataGrid在客户端会生成一个html表格,表格的id属性就是DataGrid的ID,这个ID可以用ClientID获取,然后你的全选按钮也可以在后台编码里添加一个onclick属性来让他执行你写好的js代码,比如你声明了一个DataGrid1的DataGrid,然后里面在一个模板列里放了一个复选框,然后又在外面声明了一个CheckBox1来全选DataGrid1里面的复选框,语法如下.
CheckBox1.Attributes.Add("onclick","chk(this,'"+dg1.ClientID+"')");
下面是我用html代码做了个演示.
<html>
<head>
<title></title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="蛙蛙王子">
<meta name="Keywords" content="">
<script language="JavaScript">
<!--
function chk(chk,id){
 var oEvent = document.all(id);
 var chks = oEvent.getElementsByTagName("INPUT");
 for(var i=0; i<chks.length; i++)
    {
      if(chks[i].type=="checkbox")
  chks[i].checked=chk.checked;
    }
}
//-->
</script>
</head>
<body>
<input id="CheckBox1" type="checkbox" name="CheckBox1" οnclick="chk(this,'DataGrid1')" language="javascript" />
<TABLE id="DataGrid1">
<TR>
 <TD><INPUT TYPE="checkbox" NAME="chk1"></TD>
 <TD><INPUT TYPE="checkbox" NAME="chk2"></TD>
 <TD><INPUT TYPE="checkbox" NAME="chk3"></TD>
</TR>
<TR>
 <TD><INPUT TYPE="checkbox" NAME="chk4"></TD>
 <TD><INPUT TYPE="checkbox" NAME="chk5"></TD>
 <TD><INPUT TYPE="checkbox" NAME="chk6"></TD>
</TR>
<TR>
 <TD><INPUT TYPE="checkbox" NAME="chk7"></TD>
 <TD><INPUT TYPE="checkbox" NAME="chk8"></TD>
 <TD><INPUT TYPE="checkbox" NAME="chk9"></TD>
</TR>
</TABLE>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值