0

大家好，我从 jquery 开始，当我尝试通过单击另一个复选框来选择页面中的所有复选框时遇到问题。

这是我的 Jquery 代码：

$('.selecionarTodos').live('click', function () {

        alert("test");

        var checkbox = $(this).children('td').children('[type="checkbox"]');

        $('.headerChkItem').each(function () {

            if (checkbox.is(':checked')) {
                $(this).css('background-color', '');
                checkbox.attr('checked', false);
                $(this).children('td').children('[id*="hfSelecionada"]').val('false');
                qtdTotal = qtdTotal - parseFloat($(this).children('.quantidade').text().replace(',', '.'));
            }
            else {
                $(this).css('background-color', '#e8f783');
                checkbox.attr('checked', true);
                $(this).children('td').children('[id*="hfSelecionada"]').val('true');
                qtdTotal = qtdTotal + parseFloat($(this).children('.quantidade').text().replace(',', '.'));
            }

        });
    });

这是我的客户端代码：

<asp:TemplateField HeaderText="Selecionar" ItemStyle-HorizontalAlign="Center">
  <HeaderTemplate>
   <input type="checkbox" id="headerChkItem" cssclass="selecionarTodos" runat="server" />
     </HeaderTemplate>
       <ItemTemplate>
   <input type="checkbox" id="chkItem" disabled="disabled" cssclass="selecionado" runat="server" />
       </ItemTemplate>
 </asp:TemplateField>

PS.：当我测试时，Jquery 中的“警报”没有运行。提前致谢。

4

2 回答 2

0

您需要将其从 an 更改id="headerChkItem"为class="headerChkItem" Also - 是"cssclass"服务器端语言的一部分吗？还是应该这样"class"？

于 2013-04-22T14:56:37.447 回答
0

我猜您的服务器代码（来自您的示例）看起来像这样：

<asp:ObjectDataSource runat="server" ID="DataSource" SelectMethod="GetData" TypeName="WebApplication1.Test"></asp:ObjectDataSource>
<asp:GridView runat="server" ID="Grid" DataSourceID="DataSource">
    <Columns>
        <asp:TemplateField HeaderText="Selecionar" ItemStyle-HorizontalAlign="Center">
            <HeaderTemplate>
                <input type="checkbox" class="selecionarTodos headerChkItem" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <input type="checkbox" disabled="disabled" class="selecionado chkItem" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>            
    </Columns>
</asp:GridView>

对于这个网格，你需要这样的东西：

$('.selecionarTodos').on('click', function () {
        var gridCheckboxes = $(this).parents('table').find('input:checkbox.chkItem');
        var qtdTotal = 0;

        if ($(this).is(':checked')) {
            $(this).css('background-color', '');
            gridCheckboxes.attr('checked', true);
            qtdTotal = qtdTotal - parseFloat($(this).children('.quantidade').text().replace(',', '.'));
        } else {
            $(this).css('background-color', '#e8f783');
            gridCheckboxes.attr('checked', false);
            qtdTotal = qtdTotal + parseFloat($(this).children('.quantidade').text().replace(',', '.'));
        }
    });

您的错误主要是：

  • 当类是正确的类时使用 cssclass 属性
  • 错误选择表格中的复选框

我仍然不明白为什么您为所有标题复选框使用每个循环。我发布的代码仅位于标题复选框上，当您单击它时，网格中的所有其他复选框将根据标题复选框状态被选中或取消选中。

于 2013-04-22T15:38:20.383 回答