Question

我之前发过这个问题，但有点不同。我正在采取一种新的方法，它似乎没有工作。我想知道我是否能找到一些帮助来弄清楚我哪里出错了。这样做的目的是在键入值时或在从文本框中删除焦点时进行计算

ASP：

 <asp:TextBox runat="server" ID="txtAmount1" CssClass="narrow"  text="0.00"  ClientIDMode="Static" class="PAmount"  /> 
 <asp:TextBox runat="server" ID="txtAmount2" CssClass="narrow"  text="0.00"  ClientIDMode="Static" class="PAmount"  /> 
 <asp:TextBox runat="server" ID="txtAmount3" CssClass="narrow"  text="0.00"  ClientIDMode="Static" class="PAmount"  /> 
  <asp:Literal ID="ltlGTotal" runat="server" Text="0.00" ></asp:Literal>
  <asp:TextBox runat="server" ID="txtTotalCost" CssClass="narrow"/>

JS：

  $('.PAmount').keyup(function () { 
    var total;
    for (var i = 0; i < $(this).length; ++i) {
        total += parseInt($(this)[i].val());
    }
    $('#ltlGTotal').val(total);
    $('#txtTotalCost').val(total);
});

Answer 1

以下是我要做的事情：

var $amountBoxes = $(":text.PAmount"),
    $grandTotal = $("#ltlGTotal"),
    $totalCost = $("#txtTotalCost");

$amountBoxes.on("keyup change", calculateTotal);

function calculateTotal()
{
    var total = 0;
    $amountBoxes.each(function () 
    {
        total += parseInt($(this).val());
    });
    $grandTotal.text(total.toString());
    $totalCost.val(total.toString());
};

的 Click here to view a working jsFiddle demo 的

Answer 2

我不建议将Total Textbox视为可编辑。

此外，没有必要让用户将值输入Total。

例如，1 + 2 + 3 = 8（总计不正确）。

仅供参考：您不能同时拥有CssClass="narrow"和class="PAmount";它不是一个合适的格式。

<asp:TextBox runat="server" ID="txtAmount1" CssClass="narrow" 
  Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtAmount2" CssClass="narrow" 
  Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtAmount3" CssClass="narrow" 
  Text="0.00" ClientIDMode="Static"/>
<asp:Label ID="ltlGTotal" runat="server" Text="0.00" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="txtTotalCost" ClientIDMode="Static" />
<asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="True">
    <asp:ListItem Text="One" Value="1"/>
    <asp:ListItem Text="Two" Value="2"/>
</asp:DropDownList>
<script>
    $(document).ready(function () {
        $('#ltlGTotal').html($('#txtTotalCost').val());

        $('.narrow').keyup(calculate);

        $('.total').keyup(calculate);

        function calculate() {
            var total = 0;
            $('.narrow').each(function () {
                if ($(this).val().length > 0) {
                    total += parseInt($(this).val());
                }
            });
            $('#ltlGTotal').html(total);
            $('#txtTotalCost').val(total);
        }
    });
</script>

Answer 3

试试此代码

$('.PAmount').keyup(function () {
    var total=0;
    $('.PAmount').each(function () {
        total += parseInt($(this).val());
    });     
    $('#ltlGTotal').val(total);
    $('#txtTotalCost').val(total);
});

Answer 4

您可以使用“narrow”css类添加更改事件，如下所示：

$('.narrow').change(function () {
  var total;
   for (var i = 0; i < $(this).length; ++i) {
      total += parseInt($(this)[i].val());
   }
   $('#ltlGTotal').val(total);
  $('#txtTotalCost').val(total);
});

希望有所帮助

计算Total ins JQuery

4 个答案: