如何使用 JavaScript / JQuery 在 Gridview 中获取复选框选中的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24052888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get checkbox checked value inside Gridview using JavaScript / JQuery
提问by John
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。也有列金额。现在我想当用户选中复选框时，金额值应该显示在下面的文本框中。如果用户检查多于一行，则所有金额总和应显示在金额文本框中。
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.
例如，如果用户选择 gridview 第一行及其数量值为 300。然后在文本框下方显示 300。或者，如果用户选中第二行且数量均为 300、400，则文本框将显示两个 700 的总和。
I'm trying JQuery code but not have much idea. This is what m trying.
我正在尝试 JQuery 代码，但没有太多想法。这就是我所尝试的。
function GetSelectedCasePartyAmount() {
var counter = 0;
$("#<%=gvDepositOrderDetail.ClientID%> input[id*='chkBoxGrdParty']:checkbox").each(function (index) {
if ($(this).is(':checked'))
counter++;
});
alert(counter);
}
this is my Gridview & textbox :
这是我的 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Any suggestion really appreciated!
任何建议真的很感激！
采纳答案by John
JQuery Code :
查询代码：
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) ;
}
from Code behind :
从后面的代码：
chk.Attributes.Add("onclick", string.Format("javascript:gvDepositOrderDetail_OnRowChecked(this,{0},'{1}');", lblAmount.Text, txtAmount.ClientID));
回答by Nada N. Hantouli
You are a saver ^_^ I have a list of checkboxes on a gridView, i want to show the count of selected checks without having to post back to server, this was the optimal solution :))
你是个保护程序 ^_^ 我在 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);
})
});
