jQuery for CheckAll CheckBox in GridView column header

Question

We have a GridView with multiple columns. Two of those columns contain CheckBoxes whilst the rest contain either TextBoxes or DropDownLists.

The form on which the GridView is placed is embedded within a Master Page.

Using a CheckBox in the Header Row we want to set all the checkboxes in the final column to the state of the CheckBox in the header. We don't want to set the checkbox that is in the 4th column. The CheckBox has an Id of "chkUpdate"

Examples I've seen only have 1 checkbox per row and identify it using the CSS class but both of the checkboxes on our GridView row use the same CSS Class and it seems wrong to have to create a new CSS Class purely to identify a different column of CheckBoxes

I know I could use an each loop on the rows of the GridView but cannot work out how to identify the checkbox in the final column

function checkAll(objRef) {
    $("#<%=gv_Vials.ClientID %> tr").each(function() {
    //What goes here? = objRef.checked;
    };
}

I hope I've explained what I require but if anyone needs further clarification please feel free to ask

Answer 1

This is how I do it.

ASP.net:

            <asp:GridView ID="gvStudents" runat="server" DataSourceID="SqlDataSourceStudents" AutoGenerateColumns="False" Width="100%" OnRowDataBound="gvStudents_RowDataBound">
                <HeaderStyle BackColor="#5D7B9D" ForeColor="White" />
                <AlternatingRowStyle BackColor="#EEEEEE" />
                <RowStyle BackColor="White" />
                <Columns>
**..normal column templates or boundfields go here..**
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox id="CheckBoxAll" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);"/>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBoxAdd" runat="server" onclick="javascript:HighlightRow(this);"/>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

jQuery:

        //jQuery to select all checkboxes on the last column (4th column) of gvStudents
        function SelectAllCheckboxesCol(chk) 
        {
            $('#<%=gvStudents.ClientID %> >tbody >tr >td:nth-child(4) > input:checkbox').attr('checked', chk.checked);

            //this works but there must be a better way! jQuery is not my fortae yet :)
            cBox.attr('checked', chk.checked);  //check all the checkboxes
            cBox.click();                       //click them all to fire the Highlightrow() function. This un-ticks the checkboxes!
            cBox.attr('checked', chk.checked);  //re-check them again!
        }

        //jQuery to highlight a row selected
        function HighlightRow(chk) {
            var isChecked = chk.checked;
            var $selectedRow = $("#" + chk.id).parent("td").parent("tr");
            var selectedIndex = $selectedRow[0].rowIndex;
            var sColor = '';

            if(selectedIndex%2 == 0)
                sColor = '#EEEEEE';
            else
                sColor = 'white';

            if(isChecked)
                $selectedRow.css({
                    "background-color" : "Yellow",
                    "color" : "Black"
                });
            else
                $selectedRow.css({
                    "background-color" : sColor,
                    "color" : "Black"
                });
        }
}

The features with the above are:

• no code behind
• highlight a row at the same time, and restore original Alternate row background
• select only the checkboxes for a specific column and specific Gridview

Downside:

• It requires you to hardcode the name of the Gridview and be specific with the column number

Answer 2

Basically, you can use jQuery's end with selector - id*="chkSelected". It will select all check box end with chkSelected

<asp:GridView runat="server" ID="gv_Vials">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <input id="btnCheckAll" type="checkbox" name="AllCheck" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkSelected" Checked='<%# bool.Parse(Eval("IsActive").ToString()) %>'/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script>
    var checkBoxSelector = '#<%=gv_Vials.ClientID%> input[id*="chkSelected"]:checkbox';

    $(document).ready(function () {
        $('#btnCheckAll').live('click', function () {
            if ($('#btnCheckAll').is(':checked')) {
                $(checkBoxSelector).attr('checked', true);
            }
            else {
                $(checkBoxSelector).attr('checked', false);
            }
        });
    });
</script>