GridView中全选复选框

我是JS新手，基本只会getElementById...做这样一个全选复选框都费了好多劲 哎。。写下来吧

 

页面上的效果大概是这样，在GridView的每行后面加一个checkbox，点击标题那行的checkbox则选中所有的checkbox，再点击则全部清除选中。

 

在Gridview的页面代码里，加这些checkbox的代码如下

<asp:TemplateField HeaderText="选择" ShowHeader="false" ItemStyle-Width="5%"> <HeaderTemplate> <input type="checkbox" id="select_all_1" οnclick="select_all(this)" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="cb_selected" runat="server" /> </ItemTemplate> </asp:TemplateField>  

然后我查看了页面运行后的页面HTML代码，数啊数，数出了N个parentNode之后就好办了。。。JS代码如下：

<mce:script type="text/javascript"><!-- function select_all(a) { checkBoxes= a.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("input"); isCheck = a.checked； for(i=0;i<checkBoxes.length;i++) { if(checkBoxes[i].type=="checkbox") { checkBoxes[i].checked = isCheck; } } } // --></mce:script> 

页面上οnclick=select_all(this),

这N个parentNode实际上是拿到GridView的那个div，然后在这个div里getElementsByTagName，拿到所有的input，判断一下他们的类型是不是checkbox，如果是的话checked就等于点击的全选的那个复选框的checked值。当然针对某一个GridView，可以直接用getElementById找到这个div，而不用N个parentNode。不过N个parentrNode虽然麻烦了些，但是对任意GridView都是可以用的。

 

不知道有没有更好的方法，只会getElementById的我来说。。目前只能想到这个了

 

一般选中这些行后，都是为了点击某个按钮，对这些行干点啥事，比如删除这些行。顺便写下，在页面后台的cs文件里怎么拿到这些行吧。

 

foreach(GridViewRow gvr in myGridView.Rows) { CheckBox cb = (CheckBox)gvr.FindControl("cb_selected"); if (cb.Checked) { //do something } }

循环遍历GridView，对每一行，用FindControl方法找到那个checkbox，这里cb_selected是我的checkbox的id，这样就可以随便对这一行干点什么啦