Question

我正在开发一个Web应用程序，它由与另一个数据网格嵌套的Datagrid组成。在父网格中，我在标题模板中有一个复选框，在子网格中的项目模板中有另一个复选框。

功能是： 1.如果我点击父复选框，应检查子网格中的所有项目，反之亦然。 2.我在子网格中有数量列，我需要在文本框中显示已检查行数的总和。

对于EG：在我的孩子网格中，我有3列，金额字段值为100,200,300。如果我单击Chkheader（父网格标题），则应选择所有子网格，并在文本框框中显示为（100 + 200 + 300）600。如果我手动取消选中子网格中的最后一行，则在文本框中显示为（100 + 200）300。

这是我的代码：

<asp:DataGrid ID="dgcostOrigin" runat="server" BorderWidth="1px" BorderColor="#FE9B00">
 <Columns>
    <asp:TemplateColumn>
        <HeaderTemplate>                                                                        
        <asp:CheckBox ID="chkHeader" runat="server" />
        </HeaderTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn>
    <ItemTemplate>
        <asp:PlaceHolder ID="VoucherDetailsChargeId" runat="server" Visible="False">
            <asp:DataGrid ID="dg_VoucherChargeDetails" runat="server" DataSource='<%#GetCFSDetailsO( (String) DataBinder.Eval(Container.DataItem,           "Name") ) %>'>
            <Columns>
                <asp:BoundColumn DataField="ID" HeaderText="mFRL_NUPKId" Visible="False"></asp:BoundColumn>
                <asp:TemplateColumn>
                    <HeaderStyle Width="5%"></HeaderStyle>
                    <ItemTemplate>
                    <asp:CheckBox ID="CHKJobsOrigin" runat="server" >
                    </asp:CheckBox> 
                    </ItemTemplate>   
                </asp:TemplateColumn>
            </Columns>
            </asp:DataGrid> 
        </asp:PlaceHolder>
      </ItemTemplate>
      </asp:TemplateColumn>
  </Columns>
</asp:DataGrid>

这是我的Javascript for calculate total（）

function CalculateTotalOriginCost(mcheckbox2) {
          var txtAmtOrg = mcheckbox2.id.replace("CHKJobsOrigin", "TXTCostOriginAmount");

            var AmountO = +(document.getElementById(txtAmtOrg).value + 0);

            var TotalAmountO = +(document.getElementById("TxtOriginCost").value + 0);

            if (mcheckbox2.checked == true) {
                TotalAmountO = TotalAmountO + AmountO;
            }
            else {
                TotalAmountO = TotalAmountO - AmountO;
            }
            document.getElementById("TxtOriginCost").value = TotalAmountO.toFixed(3);
            CalcYield();

         }

这里是选择和取消选择

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("[id*=chkHeader]").live("click", function () {
        var chkHeader = $(this);
        var grid = $(this).closest("table");
        $("input[type=checkbox]", grid).each(function () {
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                $("td", $(this).closest("tr")).addClass("selected");
            } else {
                $(this).removeAttr("checked");
                $("td", $(this).closest("tr")).removeClass("selected");
            }
        });
    });
    $("[id*=CHKJobsOrigin]").live("click", function () {
        var grid = $(this).closest("table");
        var chkHeader = $("[id*=chkHeader]", grid);
        if (!$(this).is(":checked")) {
            $("td", $(this).closest("tr")).removeClass("selected");
            chkHeader.removeAttr("checked");
        } else {
            $("td", $(this).closest("tr")).addClass("selected");
            if ($("[id*=CHKJobsOrigin]", grid).length == $("[id*=CHKJobsOrigin]:checked", grid).length) {
                chkHeader.attr("checked", "checked");
           var chkChild = $("[id*=CHKJobsOrigin]", grid);     
                 CalculateTotalOriginCost(chkChild); 
            }
        }

    });
</script>

全选并取消选择全部正常，但我无法在文本框中显示总计。如果我使用get total它没有select all函数它正在工作。如何结合这两个功能。任何人都可以帮我解决这个问题。我需要javascript函数

如何根据父网格的标题复选框选中/取消选中所有子复选框

0 个答案: