jquery价值变化生活

Question

请参阅此HTML。

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

请参阅此代码。 我确切想要的。 当I型在amount1文本框中一些值（INT）， 自动value显示在共箱，

当我把一些值AMOUNT2， 总应该显示（amount1 + AMOUNT2）=值

我试图与这个jQuery，但并没有解决我的问题

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

有人能帮助我。 太棒了！

Answer 1

为什么要将输入添加为HTML？只需使用$（'＃total'）。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 2

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 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 =>返回true，如果该值不是数字）

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