通过选择另一个复选框来选择所有复选框答案

【问题标题】：Select all checkboxes by selecting another one通过选择另一个复选框来选择所有复选框
【发布时间】：2014-09-12 22:09:33
【问题描述】：

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

【问题讨论】：

标签： jquery asp.net-mvc client-side checkbox

【解决方案1】：

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

【讨论】：

好的，我已经将 cssclass 更改为 class，并且它已被执行，但现在我仍然需要通过单击此复选框来选择所有项目，我必须循环所有网格线吗？
你能在客户端发布HTML，而不是上面的服务器端代码吗？我看不到标记的位置，等等。另外 - 你是否将 id 更改为一个类？

【解决方案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(',', '.'));
        }
    });

您的错误主要是：

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

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

【讨论】：