javascript checkbox checkall（）函数

Question

我一直在尝试实现checkAll（）函数，以便选择/取消选择网格内的所有复选框。 我拥有的网格就是这个网格：

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

然后，我尝试了几种方法来实现checkAll（）函数：

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

我也尝试过：

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

这是一个jQuery解决方案。

一个ID为CheckAll复选框，以及在带有类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');
            }
        });
    }
});

使用jQuery函数trigger而不是将属性设置为checked将允许绑定到所述复选框的任何JavaScript事件的正常功能。

Answer 2

例如，如果您的GridOfertasDetalle.ClientObjectId为offersTable ，请尝试使用JQuery

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
}