c# - javascript - checkbox checkall() function

Question

I've been trying to implement a checkAll() function in order to select/deselect all the checkboxes inside a grid. The grid I have is this one:

<table style="width: 100%;">
            <tr>
                <td>
                    <input type="checkbox" id="chkImprimir" runat="server" enableviewstate="true" onclick="CheckAll()" />
                    <asp:Label ID="SeleccionarLabel" runat="server" meta:resourceKey="SeleccionarLabel"></asp:Label>
                </td>
                </tr>
                <tr>
                <td align="right">
                    <asp:ImageButton ID="ImageButtonDownloadXLS" ToolTip="ImageButtonDownloadXLS" ImageUrl="SiteImages/toolbar/xls.gif" 
                        onmouseover="this.src='SiteImages/toolbar/xls_hover.gif';" onmouseout="this.src='SiteImages/toolbar/xls.gif';" runat="server" meta:resourcekey="ImageButtonDownloadXLS"
                        Style="float: right;" OnClick="ImageButtonDownloadXLS_Click" />
                    <asp:Button ID="btnAddOfertasDetalle" runat="server" CausesValidation="False" meta:resourceKey="btnAddOfertasDetalle"
                        OnClientClick="javascript:AddOfertasDetalle()" Text="Afegir OfertaDetalle" />
                </td>
            </tr>
            <tr>
                <td id="Td2" runat="server" class="generalContent">
                    <ComponentArt:Grid ID="GridOfertasDetalle" runat="server" AllowEditing="true" CssClass="Grid"
                        EditOnClickSelectedItem="false" EnableViewState="true" FooterCssClass="GridFooter"
                        Height="350" ImagesBaseUrl="images/" KeyboardEnabled="false" LoadingPanelClientTemplateId="LoadingFeedbackTemplate"
                        LoadingPanelPosition="MiddleCenter" PagerStyle="Numbered" PagerTextCssClass="PagerText"
                        PageSize="15" RunningMode="Client" ShowHeader="False" Width="730"  AllowHorizontalScrolling="True">
                        <Levels>
                            <ComponentArt:GridLevel DataCellCssClass="DataCell" DataKeyField="Id" EditCellCssClass="EditDataCell"       
                                HeadingCellCssClass="HeadingCell" HeadingRowCssClass="HeadingRow" HeadingSelectorCellCssClass="SelectorCell"
                                HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow"
                                RowCssClass="Row" ShowTableHeading="false" SortAscendingImageUrl="asc.gif"
                                SortDescendingImageUrl="desc.gif" SortImageHeight="10" SortImageWidth="10">
                                <Columns>
                                    <ComponentArt:GridColumn AllowEditing="True" Width="15" ColumnType="CheckBox" Align="Center" />

                                    <ComponentArt:GridColumn DataField="Id"/>


                                </Columns>
                            </ComponentArt:GridLevel>
                        </Levels>

        </table>

Then I've tried several things in order to implement the checkAll() function:

function CheckAll() {
        var grid = GetGrid();
        var check = document.getElementById('<%=chkImprimir.ClientID%>').checked;

        grid.beginUpdate();

        var gridItem;
        var itemIndex = 0;
        while (gridItem = GetGrid().get_table().GetRow(itemIndex)) {
            gridItem.setValue(0, check, false);
            itemIndex++;
        }

        grid.endUpdate();
        grid.Render(); 
    } 

    function GetGrid() 
    {
        return <%= GridOfertasDetalle.ClientObjectId %>;
    }

I've also tried:

function CheckAll() {
        var grid = GetGrid();
        var check = document.getElementById('<%=chkImprimir.ClientID%>').checked;

        grid.beginUpdate();

        var gridItem;
        var itemIndex = 0;
        while (gridItem = GetGrid().Table.GetRow(itemIndex)) { //<-- change to Table
            gridItem.setValue(0, check); //<-- tried with and without the (x, x, FALSE)
            itemIndex++;
        }

        grid.endUpdate();
        grid.Render(); // <-- tried with and without Render
    } 

    function GetGrid() 
    {
        return <%= GridOfertasDetalle.ClientObjectId %>;
    }

Answer 1

Here is a jQuery solution.

A checkbox with ID of CheckAll and all checkboxes to be checked or unchecked inside an element with class wrapper .

$('#CheckAll').click(function () {
    if (this.checked) {
        $('.wrapper input[type=checkbox]').each(function () {
            if (!this.checked) {
                $(this).trigger('click');
            }
        });
    }
    else {
        $('.wrapper input[type=checkbox]').each(function () {
            if (this.checked) {
                $(this).trigger('click');
            }
        });
    }
});

Using the jQuery function trigger instead of setting the attribute to checked will allow for normal function of any JavaScript events tied to said checkboxes.

Answer 2

Try using JQuery, for example, if your GridOfertasDetalle.ClientObjectId is offersTable

function checkUncheckAll() {
    var offersTable = $('#offersTable');
    var allCheckBox = $('input[type=checkbox]', offersTable);
    var allCheckBoxChecked = $('input[type=checkbox]:checked', offersTable);

    if (allCheckBox.length == allCheckBoxChecked.length) //if all are checked 
    {
       allCheckBox.removeAttr('checked'); //uncheck all
    }
    else allCheckBox.attr('checked', 'checked'); //check all
}