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

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

功能是： 1.如果单击父项复选框，子网格中的所有项目都应被选中，反之亦然。 2.我在子网格中有“金额”列，我需要在文本框中显示选中行的金额总和

例如： 在我的子网格中，我有3列，金额字段值为100200300。 如果我点击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>

这是用于选择和取消选择的

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

$（“[id*=chkHeader]”）。live（“单击”，函数（）{
var chkHeader=$（本）；
var grid=$（此）.closest（“表”）；
$（“输入[type=checkbox]”，网格）。每个（函数（）{
如果（chkHeader.is（“：checked”））{
$（this.attr（“checked”、“checked”）；
$（“td”，$（this）.closest（“tr”）.addClass（“selected”）；
}否则{
$（此）.removeAttr（“选中”）；
$（“td”，$（this）.closest（“tr”）.removeClass（“selected”）；
}
});
});
$（“[id*=CHKJobsOrigin]”。live（“单击”，函数（）{
var grid=$（此）.closest（“表”）；
var chkHeader=$（“[id*=chkHeader]”，网格）；
如果（！$（this）.is（“：checked”））{
$（“td”，$（this）.closest（“tr”）.removeClass（“selected”）；
chkHeader.removeAttr（“已检查”）；
}否则{
$（“td”，$（this）.closest（“tr”）.addClass（“selected”）；
如果（$（“[id*=CHKJobsOrigin]”，网格）.length==$（“[id*=CHKJobsOrigin]：选中”，网格）.length）{
chkHeader.attr（“已检查”、“已检查”）；
var chkChild=$（“[id*=CHKJobsOrigin]”，网格）；
计算原始成本（chkChild）；
}
}
});

全选和取消全选工作正常，但我无法在文本框中显示总数。 如果我使用get total，没有全选功能，它就正常工作了。 如何结合两者的功能。 谁能帮我解决这个问题。

---

我需要javascript函数

这个问题解决了吗？我认为问题在于javascript代码中调用CalculateTotalOriginCost（chkChild），chkChild不是单个复选框，而是一个控件数组。你调试了JavaScript代码并找出了它传递的是什么吗？是的，已经解决了，谢谢hedge@Hedge您好，很抱歉打扰您，我真的需要您的帮助来解决我的问题，这是在下面提到的紧急请帮助我。。

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