实现GridView、DataList全选功能

本篇文章将一步一步通过JavaScript实现一个全选功能。
读者需要的技术点：

1、DOM的熟练操作。
2、GrivView或DataList的简单使用。

一、页面代码片段： 

 <asp:GridView ID=gv" runat="server">
          <Columns>
          <asp:TemplateField HeaderText="选择">
            <HeaderTemplate>
                <a  id="All" href="javascript:SelectAll();" 全选</a>
            </HeaderTemplate>
            <ItemTemplate>
                <input  type="checkbox" name="check"/>
            </ItemTemplate>
          </asp:TemplateField>
          </Columns>
        </asp:GridView>

 

二、JS代码【实现全选】：

 <script type="text/javascript" language="javascript">
          function SelectAll() {
            var arr = document.getElementsByName("check");
            for (var i = 0; i < arr.length; i++) {
              arr[i].checked = !arr[i].checked;
              document.getElementById("All").innerHTML = arr[i].checked == true ? "取消全选" : "全选";
            }
          }
        </script>

 

如果读者一边看一遍操作，到这里快速的按F5，应该顺利能看到全选与取消全选的效果。也许您会认为已经完美的完成任务，但是上面的片段程序还有BUG，下面我们就一起分析BUG。

三、BUG存在以下操作：

如果有大于1的记录时，当您勾选了几条记录（但没全部选择），此时当您点击“全选”或“取消全选”时，会取消已选择好的的记录，并选择点击操作之前没被选择的记录。

四、修复BUG，完美实现全选功能：

 

 <script language="javascript" type="text/javascript">
          function SelectAll() {
            var arr = document.getElementsByName("check");
            if (document.getElementById("ALL").innerHTML == "全选") {
              for (var i = 0; i < arr.length; i++) {
                arr[i].checked = true;
                document.getElementById("ALL").innerHTML = "取消全选";
              }
            }
            else {
              for (var i = 0; i < arr.length; i++) {
                arr[i].checked = false;
                document.getElementById("ALL").innerHTML = "全选";
              }
            }
          }