Jquery - 自动计算输入字段

Question

我正在尝试使此代码在下面工作，我将非常感谢您的帮助。基本上它是计算三个输入字段的总和，然后与其他两个字段相乘。最终结果应显示在输入字段 pcamount 中。

这是 jsFiddle 中的示例：http : //jsfiddle.net/D98PW/

波纹管是jquery脚本和html

在此先感谢您的帮助！

 $(document).ready(function() {
   $('input[name=deposit], input[name=minpremium], input[name=adjpremium],input[name=procombaserate], input[name=profcomper], input[name=pcamount]').change(function(e)  {
        var total_mnozi = 0;
        var total=0;
        var $row = $(this).parent();
        var dep = $row.find('input[name=deposit]').val();
        var minpre = $row.find('input[name=minpremium]').val();
        var adjpre = $row.find('input[name=adjpremium]').val();
        var procombase = $row.find('input[name=procombaserate]').val();
        var profcomper = $row.find('input[name=profcomper]').val();
       // var pcamount= $row.find('input[name=pcamount]').val();
       // total_mnozi= procombase * profcomper;
         $('dep, minpre, adjpre').each(function() {
       total += parseFloat($(this));
          total_mnozi = total * procombase * profcomper;
          $row.find('input[name=pcamount]').val( total_mnozi);

  });   
    });
   });

和 html

<table >
    <tr>  
        <td><label>MIN Premium</label></td>
         <td class="toadd"><input type="text" class="input1" name="minpremium" id="minpremium" value=""></td>   
       </tr>
        <tr>
          <td><label>Deposit</label></td>                              
         <td ><input type="text" name="deposit" id="deposit" class="input1" size="20" value=""></td>
          <td></td><td></td>  
       </tr>
       <tr>
       <td><label>Adjustment Premium</label></td>                              
       <td ><input type="text" name="adjpremium" id="adjpremium" class="input1" size="20" value=""></td>
        <td><label>Return Premium</label></td>
         <td><input type="text" class="input1" name="returnpremium" id="returnpremium"></td>
         </tr>
        <tr>   
        <td><label>Tax Allocation</label></td>
        <td><input type="text" class="input1" name="taxalloc" id="taxalloc"></td>
        <td><label>Premium Base Rate</label></td>
        <td><input type="text" class="input1" name="pramiumbase" id="pramiumbase"></td>
       </tr>
       <tr>
        <td><label>Adjustable Rate</label></td>
        <td><input type="text" class="input1" name="adjrate" id="adjrate" class="input1" size="20" value=""></td>
        <td><label>PC Base Rate</label></td>
         <td><input type="text" class="input1" name="procombaserate" id="procombaserate" class="input1" size="20" value=""></td> </tr>
        <tr>
           <td><label>Profit Commission %</label></td>
             <td><input type="text" class="input1" name="profcomper" id="profcomper" value=""></td>
              <td><label>PC Amount</label></td>
         <td><input type="text" class="input1" name="pcamount" id="pcamount" class="input1" size="20" >
                    </td>                   
       </table>   

Answer 1

由于您在所有输入字段上都使用 ID，因此您可以使用它代替 NAME 属性。它有点短，更透明。

您可以将change调用绑定到所有输入元素，或者如果您希望限制它们，您可以使用$('input#ID1, input#ID2,...')ID1,ID2... 是您希望将其设置为元素的 ID。

$(document).ready(function() {
   $('input').change(function(e)  {
        var total_mnozi = 0;
        var dep = parseFloat($('#deposit').val());
        var minpre = parseFloat($('#minpremium').val());
        var adjpre = parseFloat($('#adjpremium').val());
        var procombase = parseFloat($('#procombaserate').val());
        var profcomper = parseFloat($('#profcomper').val());

        total_mnozi = (dep+minpre+adjpre) * procombase * profcomper;
        $('#pcamount').val( total_mnozi);
    });
   });