如何在GridView中的一个特定列中选择所有复选框？

Question

我有一个GridView，其中有两列复选框，我想在顶部添加两个单独的“全部检查”文本框，“检查所有”列A列应该只检查该列中的所有复选框。 B列上方的“全部检查”应仅检查B列中的所有列。此外，我无法应用组验证。对于每一行，只应选择两列中的一列。我尝试找到解决方案，但是当我点击顶部的全部检查时，它会检查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 + "')");
        }
    }

故障是用户仍然可以选择“全部检查”，因此两个列同时被选中。虽然在不使用全选复选框时只能选择一个。