如何使用JavaScript / JQuery在Gridview中獲取復選框檢查值

Question

我在其復選框內有一個gridview。 也有列金額。 現在我想當用戶選中復選框時，金額值應顯示在下面的文本框中。 如果用戶檢查多於一行，則所有金額總和應顯示在金額文本框中。

就像如果用戶選擇gridview第一行且其金額為300。然后在文本框下方顯示300。或者，如果用戶選中2行且兩者均具有金額300、400，則文本框將顯示兩者的總和。

我正在嘗試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);
           })
       });

Answer 2

jQuery代碼：

     function gvDepositOrderDetail_OnRowChecked(checkBoxElement, newAmount, targetElement)
    {
        var amountElement = $find(targetElement);
        var amount = amountElement.get_value() == ''? 0 : amountElement.get_value() - 0;
        if (isNaN(amount)) {
            amount = 0;
        }
        if (checkBoxElement.checked == false)
        {
            newAmount = newAmount * -1;
        }
        amount = amount + newAmount;
        amountElement.set_value(amount) ;
    }

從后面的代碼：

chk.Attributes.Add("onclick", string.Format("javascript:gvDepositOrderDetail_OnRowChecked(this,{0},'{1}');", lblAmount.Text, txtAmount.ClientID));