Question

请参阅此HTML。

<input type="text" name="amount1" value="10" />
<input type="text" name="amount2" value="5" />
<input type="text" name="total" value="" disabled="disabled" />

请参阅此代码。我确切想要什么。当我在amount1文本框中键入一些值（int）时，该值自动显示在总框中，

当我给amount2一些价值时，总计应显示（amount1 + amount2）= value

我试过这个jQuery，但没有解决我的问题

$(document).ready(function() {
    $('#amount1').keyup(function() {
     $('#total').html('<input type="text" name="total" style="width: 49%;" value="' + $(this).val() + '"/>');
    });
});

任何人都可以帮助我。太棒了！

Answer 1

DEMO 它需要在输入中添加class，以便您可以根据需要添加尽可能多的输入，并避免使用names列表，如果您不需要通过简单的编辑就可以使其与你的html

的 HTML ：

<input type="text" class='amount' name="amount1" value="10" /> <input type="text" class='amount' name="amount2" value="5" /> <input type="text" name="total" value="" disabled='disabled' />

<强> JS ：

var total = 0; $(document).ready(function () { //Calculate the first total once the page is loaded $('input.amount').each(function () { total += parseInt($(this).val()); }); $('input[name="total"]').val(total); //Each time the input value change(right click, keyboard, any) recalculate the total $('input.amount').on('input', function () { total = 0; $('input.amount').each(function () { var amountInfo = parseInt($(this).val()); amountInfo = (amountInfo) ? amountInfo : 0; //Check if number otherwise set to 0 total += amountInfo; }); $('input[name="total"]').val(total); }); });

Answer 2

为什么要将输入添加为HTML？只需使用$（＆＃39; #total＆＃39;）。val（[你想要的值]）;

使用此代码：

$(document).on('keyup', '#amount1, #amount2', function() {
    var sumAll = parseInt($('#amount1').val()) + parseInt($('#amount2').val());
  $('#total').val(sumAll);
});

并且不要忘记在输入元素中添加id，如下所示：

<input type="text" id="amount1" name="amount1" value="10" />
<input type="text" id="amount2" name="amount2" value="5" />
<input type="text" id="total" name="total" value="" disabled="disabled" />

最好使用parsInt（）函数来确定整数类型。

你可以看到小提琴：http://jsfiddle.net/QMaster/8gthskvb/

Answer 3

你在HTML中缺少id，你输入值的方式有点奇怪。试试这个：

<强> HTML

<input type="text" id="amount1" name="amount1" value="10" />
<input type="text" id="amount2" name="amount2" value="5" />
<input type="text" id="total" name="total" value="" disabled="disabled" />

<强>的Javascript

$(document).ready(function() {
$('#amount1,#amount2').keyup(function() {
    var total = parseInt($('#amount1').val()) + parseInt($('#amount2').val());
 $('#total').val(total);
});

}）;

这个小提琴

jsFiddle

请注意，您需要将（文本）值转换为整数以使计算正确。这就是我使用parseInt()的原因。如果需要输入浮点数，则需要使用parseFloat()方法替换此转换。您可能还想检查输入的值是否确实是一个数字，可以用不同的方式完成，其中一个是isNaN()方法（如果值不是数字，则isNotaNumber =＆gt;返回true）< / p>

Answer 4

$(document).ready(function() {
    $('#amount1').keyup(function() {
        $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount2').val(), 10));
    });
    $('#amount2').keyup(function() {
        $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount1').val(), 10));
    });
});

Answer 5

<table>
    <tr>
        <td width="40px">1</td>
        <td>Number</td>
        <td><input class="txt" type="text" name="txt1" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Number</td>
        <td><input class="txt" type="text" name="txt2" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Number</td>
        <td><input class="txt" type="text" name="txt3" /></td>
    </tr>
    <tr id="summation">
        <td  colspan ="2" align="right">
            Sum :
        </td>
        <td>
          <input type="text" id='sum1' name="input" />
        </td>
        </span>
        </td>
    </tr>
</table>

JQuery部分，

$(document).ready(function() {
        //this calculates values automatically 
        calculateSum();

        $(".txt").on("keydown keyup", function() {
            calculateSum();
        });
    });

    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0){
                $(this).css("background-color", "red");
            }
        });

        $("input#sum1").val(sum.toFixed(2));
    }

小提琴：here

Answer 6

<input type="text" id="amount1" name="amount1" value="10" />
<input type="text" id="amount2" name="amount2" value="5" />
<input type="text" id="total" name="total" value="" disabled="disabled" />

    $(document).ready(function() {
    $('#amount1').keyup(function() {
   $('#total').val(parseInt($('#amount1').val())+parseInt($('#amount2').val()));       

   });
});

这是你的解决方案，因为你还没有使用id标签，因为jquery可以使用IDz和CLasses你没有使用过。所以我重新创建了你的解决方案，希望它很简单，你可以理解它。

此致伊姆兰卡西姆完美的网络解决方案

Working Link

Jquery值改变了直播

6 个答案: