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')"); 
     } 
    }