javascript实现无刷新计算GridView里购物清单总价格

要求实现填写购买数量并在复选框选中时，自动计算出购物金额:

 

 

 

 

 

<script language="javascript" type="text/javascript">
    //复选框   
    function cbxSelect_Onclick()
    {
        var gv = document.getElementById('<%=this.GridView1.ClientID %>');   
        var moneys=0;   
        for(var i=2;i<gv.rows.length+1;i++)
        {
            var cBox;                       
            var tCount = 0;
            var tPrice = 0;            ;           
            if(i<10)
            {
                cBox = document.getElementById("ctl00_CPH_Content_GridView1_ctl0"+i+"_cbxSelect");  
                tCount = document.getElementById("ctl00_CPH_Content_GridView1_ctl0"+i+"_txtCount");
                tPrice = document.getElementById("ctl00_CPH_Content_GridView1_ctl0"+i+"_txtPrice");
            }
            else if(i>=10)
            {
                cBox = document.getElementById("ctl00_CPH_Content_GridView1_ctl"+i+"_cbxSelect"); 
                tCount = document.getElementById("ctl00_CPH_Content_GridView1_ctl"+i+"_txtCount");
                tPrice = document.getElementById("ctl00_CPH_Content_GridView1_ctl"+i+"_txtPrice");
            }           
            if(cBox.checked)
            {         
                 moneys += (tCount.value)*(tPrice.value); 
            }
        }
        document.getElementById('ctl00_CPH_Content_Text2').value = moneys;
    }  

    //输入购物数量的文本框

    function txtCount_OnChange()
    {   var moneys = 0;  
        var gv = document.getElementById('<%=this.GridView1.ClientID %>');       
        for(var i=2;i<gv.rows.length+1;i++)
        {
            var cBox;
            var tCount;
            var tPrice;
            if(i<10)
            {
                cBox = document.getElementById("ctl00_CPH_Content_GridView1_ctl0"+i+"_cbxSelect");  
                tCount = document.getElementById("ctl00_CPH_Content_GridView1_ctl0"+i+"_txtCount");
                tPrice = document.getElementById("ctl00_CPH_Content_GridView1_ctl0"+i+"_txtPrice");
            }
            else if(i>=10)
            {
                cBox = document.getElementById("ctl00_CPH_Content_GridView1_ctl"+i+"_cbxSelect"); 
                tCount = document.getElementById("ctl00_CPH_Content_GridView1_ctl"+i+"_txtCount");
                tPrice = document.getElementById("ctl00_CPH_Content_GridView1_ctl"+i+"_txtPrice");
            }
            if(cBox.checked)
            {                              
                moneys += (tCount.value)*(tPrice.value);
            }
        } 
        document.getElementById('ctl00_CPH_Content_Text2').value = moneys;
    }

</script>

 

 

 <asp:GridView ID="GridView1" runat="server" SkinID="GridViewSkin" AutoGenerateColumns="False">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <input type="checkbox" id="cbxSelect" runat="server" onclick="cbxSelect_Onclick()"/>                        
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Commoditie01") %>' />                                           
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="Commoditie02" HeaderText="产品名称" />
                                    <asp:BoundField DataField="Commoditie10" HeaderText="商品简介" />                                  
                                    <asp:TemplateField HeaderText="价格">
                                        <ItemTemplate>
                                            <input id="txtPrice" runat="server" value='<%# Eval("Commoditie03") %>' style="width:60px; border:0; background-color:White;" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="购买数量">
                                        <ItemTemplate>
                                                <input type="text" id="txtCount" runat="server" value="0"  onchange='txtCount_OnChange()' style="width:30px;  background-color:White;"  />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>