如何使用JavaScript/JQuery在Gridview中获取复选框检查值 [英] How to get checkbox checked value inside Gridview using JavaScript / JQuery

问题描述

我在其复选框内有一个gridview.也有列金额.现在我想当用户选中复选框时，金额值应显示在下面的文本框中.如果用户检查了多于一行，则所有金额总和应显示在金额文本框中.

I have a gridview inside its a checkbox. Also has column Amount. Now I want when user checked checkbox then Amount value should show in below textbox. If user check more than one row then all amount sum should be show in amount textbox.

例如，如果用户选择gridview第一行&其金额值为300.然后在文本框下方显示300.或者如果用户选中了2行&两者的金额分别为300、400，然后文本框将显示两者之和700.

Like if user select gridview first row & its amount value is 300. then below textbox show 300. Or if user checked 2 row & both have amount 300, 400 then textbox will show sum of both 700.

我正在尝试JQuery代码，但没有太多主意.这就是我要尝试的.

I'm trying JQuery code but not have much idea. This is what m trying.

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

这是我的Gridview&文字框:

this is my Gridview & textbox :

    <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>

任何建议都非常感谢！

推荐答案

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));

这篇关于如何使用JavaScript/JQuery在Gridview中获取复选框检查值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！