Asp.net多个gridviews，headertemplate中的复选框全选/取消选择所有功能

Question

我在我的aspx页面中使用了两个gridview控件。我的控件中都有一列复选框。我正在通过在两个gridviews的头模板中提供一个复选框并使用java脚本函数来帮助用户选择/取消选中两个gridviews中的所有复选框。下面是代码

<script type="text/javascript"> 
    function UncheckParent(obj) { 
     var isUnchecked = obj.checked; 
     if (isUnchecked == false) { 
      var frm = document.forms[0]; 
      for (i = 0; i < frm.length; i++) { 
       if (frm.elements[i].id.indexOf('chkSelectAllCheckboxes') != -1) { 
        frm.elements[i].checked = false; 
       } 
      } 
     } 

    } 

    function CheckAll(obj) { 
     var row = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; 
     var inputs = row.getElementsByTagName("input"); 
     for (var i = 0; i < inputs.length; i++) { 
      if (inputs[i].type == "checkbox") { 
       inputs[i].checked = obj.checked; 
      } 
     } 
    } 
</script> 

但问题是，一旦我选择或不选择这样的一个复选框同时在GridView的所有复选框得到遏制。我也可以举一个简短的例子。两个gridviews gdvwStudents和gdvwTeachers。标题模板中都有复选框列和复选框。当我点击gdvwStudents的标题复选框时，使用上面的代码，gdvStudents和gdvTeachers中的所有复选框都会被选中。请

Answer 1

这是我怎么做的：

 function UnCheckAllContainer(obj) { 
     var isUnchecked = obj.checked; 
     if (isUnchecked == false) { 
      var frm = document.forms[0]; 
      for (i = 0; i < frm.length; i++) { 
       if (frm.elements[i].id.indexOf('chkSelectAllCheckboxesContainers') != -1 
       ) { 
        frm.elements[i].checked = false; 
       } 
      } 
     } 
    } 

    function CheckAllContainer(chk) { 
     $('#<%=gdvwContainers.ClientID %>').find("input:checkbox").each(function() { 
      if (this != chk) { 
       this.checked = chk.checked; 
      } 
     }); 

    } 

Answer 2

你做错了。您应该获取点击标题的特定网格内的复选框;相反，您正在获取ALL在表单上创建的复选框！这是非常低效的，并解释了为什么一切都被选中/取消选中，无论您点击哪个标题。

如果你可以使用jQuery，你应该能够将这些功能改写成这样：

function checkAll(gridID,checkbox) { 
    $("#"+gridID+" input:checkbox").attr("checked",checkbox.checked); 
} 

为一个简单的例子见this jsfiddle。

Answer 3

添加JavaScript函数按以下

<script type="text/javascript"> 
function SelectAll(id, grd) { 
    //get reference of GridView control 
    var grid = null; 
    if (grd = "1") { 
     grid = document.getElementById("<%= GridView1.ClientID %>"); 
    } 
    else { 
     grid = document.getElementById("<%= GridView2.ClientID %>"); 
    } 


    //variable to contain the cell of the grid 
    var cell; 

    if (grid.rows.length > 0) { 
     //loop starts from 1. rows[0] points to the header. 
     for (i = 1; i < grid.rows.length; i++) { 
      //get the reference of first column 
      cell = grid.rows[i].cells[0]; 

      //loop according to the number of childNodes in the cell 
      for (j = 0; j < cell.childNodes.length; j++) { 
       //if childNode type is CheckBox     
       if (cell.childNodes[j].type == "checkbox") { 
        //assign the status of the Select All checkbox to the cell checkbox within the grid 
        cell.childNodes[j].checked = document.getElementById(id).checked; 
       } 
      } 
     } 
    } 
} 
</script> 

和处理JavaScript功能的GridView的绑定调用的Rowbound事件按以下

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.Header) 
     { 
      //Find the checkbox control in header and add an attribute 
      ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + 
        ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "'" + ", '1')"); 
     } 
    } 

    protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.Header) 
     { 
      //Find the checkbox control in header and add an attribute 
      ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + 
        ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "'" + ", '2')"); 
     } 
    }