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

由于您使用上，你可以用这个来代替NAME属性所有的输入字段的ID。它更短，更透明。

您可以将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); 
    }); 
    });