jquery - JQuery - 将 3 个输入字段相乘并自动填充第 4 个输入

Question

我有 3 个输入字段：

<input type="text" name="height" /> * <input type="text" name="width" /> *<input type="text" name="length" />
and the total:
= <input type="text" name="total" />

如何使用 jQuery 自动填充总字段？

谢谢！

Answer 1

首先，您应该将 id 添加到您的输入中：

<input type="text" id="txt1" ... /> 
// also for 2, 3 and 4 ...

然后，您可以简单地添加这个 jquery 事件来动态计算结果：

<script>
    $(document).ready(function () { 
        $("#txt1, #txt2, #txt3").change(function() {
            $("#txt4").val($("#txt1").val() * $("#txt2").val() * $("#txt3").val());
        });
    });
</script>

Answer 2

请看一下http://jsfiddle.net/uGgfh/

$('.num').change(function(){
    var tot = 1;
    $.each($('input[class=num]'),function(){
      var curr_val = $(this).val();
        if(curr_val != ""){
          tot = tot * curr_val;
          $('.tot').val(tot);
        }
    });
});

Answer 3

将 id 添加到所有输入中，然后$('input#input4').val($('input#input1').val()*$('input#input2').val()*$('input#input3').val())

Answer 4

演示

$('input[type="text"]').keyup(function () {
    var result = 1;
    var x=0;
    $('input[type="text"]').not('input[type="text"][name=total]').each(function () {
        if (this.value != '') {
            result *= this.value ;
            x++;
        }
    });
    $('input[type="text"][name=total]').val((x == 0) ?0:result);
});