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

DEMO

$('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);
});

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

4 个答案: