如何通过该gridview中的TemplateField复选框更新gridview中的标签而无需回发答案

【问题标题】：How to update a label out of gridview by TemplateField checkbox in that gridview without postback如何通过该gridview中的TemplateField复选框更新gridview中的标签而无需回发
【发布时间】：2014-07-10 13:13:05
【问题描述】：

我有一个gridview，每一行在第一列都有一个复选框。我将 datagridview 绑定到账单数据源。我想显示在网格视图之外的标签上检查的账单总和。而且我不希望复选框回发。我尝试使用 javascript（asp:checkbox 的 onclick 事件）来执行此操作，但无法实现。我也尝试了 AjaxControlToolkit，但再次失败。

请帮忙。

<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" Width="100%"
                    CssClass="gv">
                    <Columns>
                        <asp:TemplateField HeaderText="Seç" HeaderStyle-Width="50px">
                            <ItemTemplate>
                                <asp:CheckBox ID="chkRow" runat="server" Checked="false"/>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:TemplateField>
                        <asp:BoundField DataField="InvoiceDate" HeaderText="Fatura Tarihi" DataFormatString="{0:dd-MM-yyyy}">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Amount" HeaderText="Tutar" DataFormatString="{0:N2} TL">
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </asp:BoundField>
 </Columns>
                </asp:GridView>

【问题讨论】：

标签： asp.net gridview checkbox asp.net-ajax

【解决方案1】：

正如您所提到的，您还尝试了 JS 来解决您的问题。所以在这里我在JS中发布你的解决方案。我想你的 label id lbl （你想显示相应列名 Tutar 的总和）。你的标签

<asp:Label ID="lbl" runat="server"></asp:Label>

您只需在复选框中添加一个类。我用 mychk。所以你的复选框代码是这样的

Columns>
     <asp:TemplateField HeaderText="Seç" HeaderStyle-Width="50px">
         <ItemTemplate>
             <asp:CheckBox ID="chkRow" runat="server" Checked="false" class="mychk" />
          </ItemTemplate>
    </asp:TemplateField>

你的 jquery 会是

<script type="text/javascript">
        $(document).ready(function () {
            var sum = parseInt($('#lbl').html()) || 0;
            $('.mychk input[type="checkbox"]').on('change', function () {
                if ($(this).is(':checked')) {
                    sum += parseInt($(this).closest('tr').find('td:eq(2)').html()) || 0;
                } else {
                    sum -= parseInt($(this).closest('tr').find('td:eq(2)').html()) || 0;
                }
                $('#lbl').html(sum);
            });
        }); 
</script>

当你 check 或 uncheck checkboxes 时，它会显示总和

【讨论】：