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

I would do exactly what you have said not to do, create a separate class for the check boxes you want. Then use jQuery selector to access them. — Jack Pettinger
– Jack Pettinger, Commented Mar 25, 2013 at 18:07

Win · Accepted Answer · 2013-03-25 18:26:02Z

1

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>

answered Mar 25, 2013 at 18:26

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fandango68 Over a year ago

The "fault" with this method is that it requires you to hardcode in the Gridview ID. Is there a way to do the same without hardcoding?

Fandango68 · Accepted Answer · 2015-09-25 01:55:59Z

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

Collectives™ on Stack Overflow

jQuery for CheckAll CheckBox in GridView column header

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related