Question

大家好我是以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中的“警报”没有运行。提前谢谢。

Answer 1

您需要将其从id="headerChkItem"更改为class="headerChkItem" 另外 - "cssclass"是服务器端语言的一部分吗？或者应该是"class"？

Answer 2

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

<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(',', '.'));
        }
    });

您的错误主要是：

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

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

选择所有复选框，选择另一个复选框

2 个答案: