如何在GridView的一個特定列中選擇所有複選框？

Question

我有一個GridView，其中有兩列複選框，我想在上面添加兩個單獨的「檢查所有」文本框，「檢查全部」列上面的A應該只檢查該列中的所有複選框。在B列上方的「全部檢查」應僅檢查B列中的所有列。另外我無法申請groupvalidation。對於每一行，只能選擇兩列中的一列。我試着找到解決方案，但是當我點擊全部頂部時，它會檢查gridview中存在的所有複選框，並且也沒有組驗證。這是我的代碼..

HEAD：

<script type = "text/javascript"> 
    function Check_Click(objRef) { 
     //Get the Row based on checkbox 
     var row = objRef.parentNode.parentNode; 
     if (objRef.checked) { 
      //If checked change color to Aqua 
      row.style.backgroundColor = "aqua"; 
     } 
     else { 
      //If not checked change back to original color 
      if (row.rowIndex % 2 == 0) { 
       //Alternating Row Color 
       row.style.backgroundColor = "#C2D69B"; 
      } 
      else { 
       row.style.backgroundColor = "white"; 
      } 
     } 

     //Get the reference of GridView 
     var GridView = row.parentNode; 

     //Get all input elements in Gridview 
     var inputList = GridView.getElementsByTagName("input"); 

     for (var i = 0; i < inputList.length; i++) { 
      //The First element is the Header Checkbox 
      var headerCheckBox = inputList[0]; 

      //Based on all or none checkboxes 
      //are checked check/uncheck Header Checkbox 
      var checked = true; 
      if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) { 
       if (!inputList[i].checked) { 
        checked = false; 
        break; 
       } 
      } 
     } 
     headerCheckBox.checked = checked; 

    } 
</script> 
<script type = "text/javascript"> 
    function checkAll(objRef) { 
     var GridView = objRef.parentNode.parentNode.parentNode; 
     var inputList = GridView.getElementsByTagName("input"); 
     for (var i = 0; i < inputList.length; i++) { 
      //Get the Cell To find out ColumnIndex 
      var row = inputList[i].parentNode.parentNode; 
      if (inputList[i].type == "checkbox" && objRef != inputList[i]) { 
       if (objRef.checked) { 
        //If the header checkbox is checked 
        //check all checkboxes 
        //and highlight all rows 
        row.style.backgroundColor = "aqua"; 
        inputList[i].checked = true; 
       } 
       else { 
        //If the header checkbox is checked 
        //uncheck all checkboxes 
        //and change rowcolor back to original 
        if (row.rowIndex % 2 == 0) { 
         //Alternating Row Color 
         row.style.backgroundColor = "#C2D69B"; 
        } 
        else { 
         row.style.backgroundColor = "white"; 
        } 
        inputList[i].checked = false; 
       } 
      } 
     } 
    } 
</script> 

BODY：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"> 
         <Columns> 
          <asp:BoundField DataField="RollNo" HeaderText="RollNo" /> 
          <asp:TemplateField HeaderText="Date"> 
           <EditItemTemplate> 
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
            <asp:CalendarExtender ID="CalendarExtender1" runat="server" 
             TargetControlID="TextBox1"> 
            </asp:CalendarExtender> 
           </EditItemTemplate> 
           <HeaderTemplate>         
            &nbsp; 
      </HeaderTemplate> 
           <ItemTemplate> 
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:CalendarExtender ID="CalendarExtender2" 
             runat="server" TargetControlID="TextBox2"> 
            </asp:CalendarExtender> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:BoundField HeaderText="Time" /> 
          <asp:TemplateField HeaderText="Absent"> 
           <ItemTemplate> 
            <asp:CheckBox ID="CheckBox1" runat="server" Text="Absent" /> 
            &nbsp; 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:TemplateField HeaderText="Present"> 
           <HeaderTemplate> 
            <asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" /> 
           </HeaderTemplate> 
           <ItemTemplate> 
            <asp:CheckBox ID="CheckBox2" runat="server" Text="Present" 
             onclick = "Check_Click(this)" /> 
           </ItemTemplate> 
          </asp:TemplateField> 
         </Columns> 
        </asp:GridView> 

Answer 1

好吧，我找到解決我的問題。雖然還有一個小故障。

頭：

<div runat="server"> 

    <script type="text/javascript"> 
     function SelectAll(id) { 
      //get reference of GridView control 
      var grid = document.getElementById("<%= GridView1.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[4]; 

        //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; 
         } 
        } 
       } 
      } 
     } 


     function SelectAll1(id) { 
      //get reference of GridView control 
      var grid = document.getElementById("<%= GridView1.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[3]; 

        //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> 

<script type = "text/javascript"> 
    function CheckBoxCheck(rb) { 
     var gv = document.getElementById("<%=GridView1.ClientID%>"); 
     var row = rb.parentNode.parentNode; 
     var rbs = row.getElementsByTagName("input"); 
     for (var i = 0; i < rbs.length; i++) { 
      if (rbs[i].type == "checkbox") { 
       if (rbs[i].checked && rbs[i] != rb) { 
        rbs[i].checked = false; 
        break; 
       } 
      } 
     } 
    } 
</script> 



     </div> 

身體：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
         onrowdatabound="GridView1_RowDataBound"> 
         <Columns> 
          <asp:BoundField DataField="RollNo" HeaderText="RollNo" /> 
          <asp:TemplateField HeaderText="Date"> 
           <EditItemTemplate> 
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
            <asp:CalendarExtender ID="CalendarExtender1" runat="server" 
             TargetControlID="TextBox1"> 
            </asp:CalendarExtender> 
           </EditItemTemplate> 
           <HeaderTemplate>         
            &nbsp; 
      </HeaderTemplate> 
           <ItemTemplate> 
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:CalendarExtender ID="CalendarExtender2" 
             runat="server" TargetControlID="TextBox2"> 
            </asp:CalendarExtender> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:BoundField HeaderText="Time" /> 
          <asp:TemplateField HeaderText="Present"> 
           <AlternatingItemTemplate> 
            <asp:CheckBox ID="cbSelectAll1" runat="server" onclick="CheckBoxCheck(this)" /> 
           </AlternatingItemTemplate> 
           <HeaderTemplate> 
            <asp:CheckBox ID="cbSelectAll1" runat="server" Text="All Absent" 
             onclick="CheckBoxCheck(this)" AutoPostBack="True" ValidationGroup="a" /> 
           </HeaderTemplate> 
           <ItemTemplate> 
            <asp:CheckBox ID="cbSelectAll1" runat="server" onclick="CheckBoxCheck(this)" /> 
           </ItemTemplate> 
          </asp:TemplateField> 
        <asp:TemplateField> 
        <AlternatingItemTemplate> 
         <asp:CheckBox ID="cbSelectAll" runat="server" onclick="CheckBoxCheck(this)"/> 
        </AlternatingItemTemplate> 
        <HeaderTemplate> 
         <asp:CheckBox ID="cbSelectAll" runat="server" Text="All Present" 
          onclick="CheckBoxCheck(this)" AutoPostBack="True" ValidationGroup="a" /> 
        </HeaderTemplate> 
        <ItemTemplate> 
         <asp:CheckBox ID="cbSelectAll" runat="server" onclick="CheckBoxCheck(this)" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
         </Columns> 
        </asp:GridView> 

後面的代碼：

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 + "')"); 
      ((CheckBox)e.Row.FindControl("cbSelectAll1")).Attributes.Add("onclick", "javascript:SelectAll1('" + ((CheckBox)e.Row.FindControl("cbSelectAll1")).ClientID + "')"); 
     } 
    } 

毛刺的是，用戶還可以同時選擇了 「檢查所有」，因此無論是列同時被選中。雖然在不使用全選複選框時只能選擇一個。