How to select/unselect all child check box based o

问题:

I am Developing a web application which consists of Datagrid nested with another datagrid. In Parent Grid i have a Check box in the header template and in the child grid have another check box in the item template.

Functionality is: 1.If i click on the parent check box all items in the child grid should be get checked and vice versa. 2. I have amount column in the child grid , i need the sum of checked row's amount to be displayed in the textbox.

For EG: in my child grid i have 3 column with the amount field value as 100,200,300. If i click on Chkheader( parent grid header) then all child grid should get selected and in the textbox box it should display as (100+200+300)600. If i manuly uncheck the last row in the child grid then in text box it should dispaly as (100+200)300.

here is my code:

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

here is my 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();

         }

and here is for select and unselect

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

select all and un select all is working fine,but i'm unable to display the total in the textbox. without the select all function if i use get total it was working. How to combine both the function. can any one help me to solve this issue. I need javascript function