全选DataGrid里的复选框

最新推荐文章于 2025-05-17 16:10:01 发布

ktcserver

最新推荐文章于 2025-05-17 16:10:01 发布

阅读量949

点赞数

分类专栏：原创文章标签： datagrid javascript generator 服务器 html input

原创专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在DataGrid中实现全选功能的方法，通过JavaScript函数简化了全选操作，避免了不必要的服务器往返，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常会在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=""> <mce:script language="JavaScript"></mce:script> </head> <body> <input id="CheckBox1" type="checkbox" name="CheckBox1" onclick="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>