javascript - 如何计算复选框检查(Gridview 标题和行中)的值？

Question

当我检查标题复选框时遇到问题，下面是我的 Gridview，我从 C# 绑定(bind)而不是通过 jquery Ajax

First Scenario :IF Header is Check - AMT calculate is proper

Second : when uncheck AMT cleared properly

Third : when multiple row check box is checked manually i.e. one by one and then i uncheck any one row and then I check header checkbox ,AMOUNT getting calucated is wrong ?

我在 header 检查中遇到问题。逻辑在这部分失败。

这是我的表格

到目前为止我所做的是:

$("[id*=chkHeader]").live("click", function () {
            debugger;
            var chkHeader = $(this);
            var grid = $(this).closest("table");
            $("input[type=checkbox]", grid).each(function (i) {
                if (chkHeader.is(":checked")) {
                    $(this).attr("checked", "checked");

                    if (i >= 1) {
                        if (isNaN($('[id*= txttcfsa]').val()) && isNaN($('[id*= txtcodex]').val())) {
                            $('[id*= txttcfsa]').val(totalPrice.toFixed(2));
                            $('[id*= txtcodex]').val(totalCodex.toFixed(2));
                        } else {
                           /* if (grid[0].firstElementChild.childNodes[i].cells[4].firstElementChild.checked != true) {*/
                                //$('#ctl00_hldPage_txttcfsa').val(0);
                                //$('#ctl00_hldPage_txtcodex').val(0);

                                TCFSA = $('[id*= lbtcfsa]').html();
                                totalPrice = parseFloat(TCFSA);
                                Codex = $('[id*= lbcodex]').html();
                                totalCodex = parseFloat(Codex);
                                EarlierTCFSAValue = parseFloat($('[id*= txttcfsa]').val());
                                EarlierCodexAValue = parseFloat($('[id*= txtcodex]').val());

                                    TCFSTotalBal = parseFloat(EarlierTCFSAValue) + parseFloat(totalPrice);
                                    CodexTotalBal = parseFloat(EarlierCodexAValue) + parseFloat(totalCodex);

                                $('[id*= txttcfsa]').val(TCFSTotalBal.toFixed(2));
                                $('[id*= txtcodex]').val(CodexTotalBal.toFixed(2));
                            }
                        }

                   /* }*/
                } else {
                    $(this).removeAttr("checked");


                        if (isNaN($('[id*= txttcfsa]').val()) && isNaN($('[id*= txtcodex]').val())) {
                            $('[id*= txttcfsa]').val(totalPrice.toFixed(2));
                            $('[id*= txtcodex]').val(totalCodex.toFixed(2));
                        } else {
                            TCFSAAmtRemaning = 0;
                            CodexAmtRemaning = 0;
                            $('[id*= txttcfsa]').val(TCFSAAmtRemaning.toFixed(2));
                            $('[id*= txtcodex]').val(CodexAmtRemaning.toFixed(2));
                        }

                }
            });


        });
        $("[id*=chkRow]").live("click", function () {
            debugger;
            var grid = $(this).closest("table");
            var chkHeader = $("[id*=chkHeader]", grid);
            if (!$(this).is(":checked")) {
                chkHeader.removeAttr("checked");

                TCFSA = $('[id*= lbtcfsa]').html();
                minusprice = parseFloat(TCFSA);
                Codex = $('[id*= lbcodex]').html();
                minusCodex = parseFloat(Codex);

                if ((isNaN($('[id*= txttcfsa]').val())) && isNaN($('[id*= txtcodex]').val())) {
                    $('[id*= txttcfsa]').val(minusprice.toFixed(2));
                    $('[id*= txtcodex]').val(minusCodex.toFixed(2));

                }
                else {
                    TCFSAAmtRemaning = parseFloat($('[id*= txttcfsa]').val());
                    TCFSAAmtRemaning = parseFloat(TCFSAAmtRemaning);
                    CodexAmtRemaning = parseFloat($('[id*= txtcodex]').val());
                    CodexAmtRemaning = parseFloat(CodexAmtRemaning);
                    TCFSAAmtRemaning = TCFSAAmtRemaning - minusprice;
                    CodexAmtRemaning = CodexAmtRemaning - minusCodex;

                    $('[id*= txttcfsa]').val(TCFSAAmtRemaning.toFixed(2));
                    $('[id*= txtcodex]').val(CodexAmtRemaning.toFixed(2));
                }


            } else {
                if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
                    chkHeader.attr("checked", "checked");

                    TCFSA = $('[id*= lbtcfsa]').html();
                    totalPrice = parseFloat(TCFSA);
                    Codex = $('[id*= lbcodex]').html();
                    totalCodex = parseFloat(Codex);
                    EarlierTCFSAValue = parseFloat($('[id*= txttcfsa]').val());
                    EarlierCodexAValue = parseFloat($('[id*= txtcodex]').val());
                    TCFSTotalBal = parseFloat(EarlierTCFSAValue) + parseFloat(totalPrice);
                    CodexTotalBal = parseFloat(EarlierCodexAValue) + parseFloat(totalCodex);
                    $('[id*= txttcfsa]').val(TCFSTotalBal.toFixed(2));
                    $('[id*= txtcodex]').val(CodexTotalBal.toFixed(2));
                }
                else {
                    TCFSA = $('[id*= lbtcfsa]').html();
                    totalPrice = parseFloat(TCFSA);
                    Codex = $('[id*= lbcodex]').html();
                    totalCodex = parseFloat(Codex);
                    if (isNaN($('[id*= txttcfsa]').val()) && isNaN($('[id*= txtcodex]').val())) {
                        $('[id*= txttcfsa]').val(totalPrice.toFixed(2));
                        $('[id*= txtcodex]').val(totalCodex.toFixed(2));
                    } else {

                        TCFSTotalBal = ($('[id*= txttcfsa]').val());
                        TCFSTotalBal = parseFloat(TCFSTotalBal);
                        CodexTotalBal = parseFloat($('[id*= txtcodex]').val());
                        CodexTotalBal = parseFloat(CodexTotalBal);
                        TCFSTotalBal = parseFloat(TCFSTotalBal) + parseFloat(totalPrice);
                        CodexTotalBal = CodexTotalBal + totalCodex;

                        $('[id*= txttcfsa]').val(TCFSTotalBal.toFixed(2));
                        $('[id*= txtcodex]').val(CodexTotalBal.toFixed(2));
                    }

                }
            }
        });

她是我的 aspx 设计

 <asp:GridView ID ="grd_cfs" runat="server" AutoGenerateColumns="false" >
 <asp:TemplateField HeaderText="TCFSA" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="header-color">
                                    <ItemTemplate>
                                        <asp:Label ID="lbtcfsa" runat="server" Text='<%# Eval("TCFSA")%>'></asp:Label>

                                    </ItemTemplate>

                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="CODEX" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="header-color">
                                    <ItemTemplate>
                                        <asp:Label ID="lbcodex" runat="server" Text='<%# Eval("CODEX")%>'></asp:Label>

                                    </ItemTemplate>
                                </asp:TemplateField>
                                     <asp:TemplateField HeaderText="Select" HeaderStyle-CssClass="header-color" ItemStyle-HorizontalAlign="Center">
                                                    <HeaderTemplate>
                                                        <asp:CheckBox ID="chkHeader" runat="server" />
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                        <asp:CheckBox ID="chkRow" runat="server" />
                                                    </ItemTemplate>
                                                </asp:TemplateField>
</asp:GridView >

 <asp:TextBox ID ="txttcfsa" runat="server" ></asp:TextBox>
<asp:TextBox ID ="txtcodex" runat="server" >

Answer 1

您可以简化代码。您需要处理两个事件。

1. 当行复选框更改时:查找所有选中的复选框并对两列中的值求和
2. 当标题复选框更改时:将所有行复选框设置为标题状态，然后触发行更改事件

这是一个运行片段:

//event handler for row clicks
$(".chkRow").on("change", function() {
  var totaltcfsa = 0;
  var totalcodex = 0;

  //loop through each checked row and sum the different columns
  $(".chkRow:checked").each(function() {
    var chk = $(this);
    var tcfsa = chk.parent().siblings(":nth-child(3)").text();
    var codex = chk.parent().siblings(":nth-child(4)").text();
    totaltcfsa += parseFloat(tcfsa);
    totalcodex += parseFloat(codex);
  });

  //display results
  $("#totaltcfsa").val(totaltcfsa.toFixed(2));
  $("#totalcodex").val(totalcodex.toFixed(2));
});

//event handler for header click
$("#chkHeader").on("change", function() {
  var checked = this.checked;

  //set all rows to the same as the header
  $(".chkRow").prop("checked", checked);

  //trigger row changed event
  $(".chkRow").trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>CFS Name</th>
    <th>Amount</th>
    <th>TCFSA</th>
    <th>CODEX</th>
    <th><input type="checkbox" id="chkHeader"/></th>
  </tr>
  <tr>
    <td>TRANSWORLD GLS INDIA</td>
    <td>2000.00</td>
    <td>1420.00</td>
    <td>580.00</td>
    <td><input type="checkbox" class="chkRow"></td>
  </tr>
  <tr>
    <td>TRANSWORLD GLS INDIA</td>
    <td>2000.00</td>
    <td>1420.00</td>
    <td>580.00</td>
    <td><input type="checkbox" class="chkRow"></td>
  </tr>
  <tr>
    <td>TRANSWORLD GLS INDIA</td>
    <td>2000.00</td>
    <td>1420.00</td>
    <td>580.00</td>
    <td><input type="checkbox" class="chkRow"></td>
  </tr>
</table>
Total TCFSA <input id="totaltcfsa" />
Total Codex <input id="totalcodex" />