javascript - 如何使用 JavaScript/JQuery 获取 Gridview 中的复选框选中值

Question

我的复选框内有一个 GridView 。还有金额栏。现在我希望当用户选中复选框时，金额值应显示在下面的文本框中。如果用户检查多行，则所有金额总和应显示在金额文本框中。

就像如果用户选择 gridview 第一行且其金额值为 300。然后下面的文本框显示 300。或者如果用户选中 2 行且金额均为 300、400，则文本框将显示两者的总和 700。

我正在尝试 JQuery 代码，但没有太多想法。这就是我正在尝试的。

function GetSelectedCasePartyAmount() {
        var counter = 0;
        $("#<%=gvDepositOrderDetail.ClientID%> input[id*='chkBoxGrdParty']:checkbox").each(function (index) {
        if ($(this).is(':checked'))
            counter++;
    });
    alert(counter);
}

这是我的 Gridview 和文本框:

    <asp:GridView ID="gvDepositOrderDetail" runat="server" CssClass="table table-hover table-striped table-bordered"
                    AutoGenerateColumns="false" ShowHeaderWhenEmpty="True" AllowPaging="true"
                    PagerStyle-CssClass="paging" PageSize="10" OnRowDataBound="gvDepositOrderDetail_RowDataBound">
                    <PagerStyle CssClass="gridviewPager" />
                    <RowStyle CssClass="" />
                    <AlternatingRowStyle CssClass="active" />
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:CheckBox ID="chkBoxGrdParty" runat="server" Checked="false" />
                                <asp:HiddenField ID="hdnDepositOrderId" runat="server" />
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center" />
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$Resources:ORDER_NO %>">
                            <ItemTemplate>
                                <asp:Label ID="lblOrderNo" runat="server"></asp:Label>
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center" />
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$ Resources:CASE_PARTY_NAME %>">
                            <ItemTemplate>
                                <asp:Label ID="lblCasePartyName" runat="server"></asp:Label>
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center small-column" />
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$ Resources:AMOUNT %>">
                            <ItemTemplate>
                                <asp:Label ID="lblAmount" runat="server"></asp:Label>
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center" />
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$ Resources:DEPOSIT_TYPE %>">
                            <ItemTemplate>
                                <asp:Label ID="lblDeopsitType" runat="server"></asp:Label>
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center" />
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$ Resources:DEPOSIT_SOURCE %>">
                            <ItemTemplate>
                                <asp:Label ID="lblDepositSource" runat="server"></asp:Label>
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center" />
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="<%$ Resources:DECISION_DATE %>">
                            <ItemTemplate>
                                <asp:Label ID="lblDecisionDate" runat="server"></asp:Label>
                            </ItemTemplate>
                            &lt;HeaderStyle CssClass="text-center" />
                            <ItemStyle CssClass="text-center" />
                        </asp:TemplateField>

                        <%--       <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkBtnViewDetail" CausesValidation="false" CommandName="ViewDetail" CssClass="btn btn-primary btn-sm"
                            runat="server"></asp:LinkButton>
                    </ItemTemplate>
                    &lt;HeaderStyle CssClass="text-center" />
                    <ItemStyle CssClass="text-center" />
                </asp:TemplateField>--%>
                    </Columns>
                    <EmptyDataTemplate>
                        <asp:Literal ID="ltrlEmptyData" runat="server" Text="<%$ Resources:Common,EMPTY_DATA_GRID%>"></asp:Literal>
                    </EmptyDataTemplate>
                </asp:GridView>

非常感谢任何建议!

Answer 1

你真是个节约者^_^我在 gridView 上有一个复选框列表，我想显示所选检查的数量，而不必回发到服务器，这是最佳解决方案:))

       $(document).ready(function () {
           $('*[id^="myCheckBox"]').change(function () {
               var counter = 0;
               $("#<%=gvChecks.ClientID%> input[id*='myCheckBox']:checkbox").each(function  (index) {
                   if ($(this).is(':checked'))
                       counter++;
               });
               var the_label = document.getElementById('lblSelectedCount');
               the_label.textContent = counter;
               //alert(counter);
           })
       });