Question

请帮帮我。我想在多个输入值上使用此脚本。请帮帮我。

<script type="text/javascript"> 
$(document).ready(function() {
        $('#pack').blur(function() {
    var amount = parseInt($("#rate").val() * $("#pack").val());
    var totalamount = parseInt($("#weight").val() * $("#pack").val());
    $('.amount').html(amount);
    $('.totalamount').html(totalamount);
    return false;
});
   });
  </script>

  <p>amount = (rate * pack)</p> 
 <p>totalamount = (weight * pack)</p> 

  <form action="/" class="calculator"> 
<label for="rate">rate: </label><input name="rate" id="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack" id="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag" id="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight" id="weight" type="text"  size="5" /> 
<input type="submit" value="calculate" /> 
</form> 

<p>Amount: <span class="amount"></span></p> 
<p>Total Amount: <span class="totalamount"></span></p>

例如：

<label for="rate">rate: </label><input name="rate" id="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack" id="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag" id="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight" id="weight" type="text"  size="5" />

<label for="rate">rate: </label><input name="rate" id="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack" id="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag" id="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight" id="weight" type="text"  size="5" />

感谢

Answer 1

<script type="text/javascript"> 
$(document).ready(function() {
    $('#pack').blur(function() {
        var amount = 0;
        var totalamount = 0;
        $('.rate').each(function() {
            amount+= parseInt($(this).val() * $(this).next().val(), 10);
            totalamount+= parseInt($(this).next().next().val() * $(this).next().next().next().val(), 10);
            // their should be a better solution to do the next().next().etc part :P, please tell me
        });

        $('.amount').html(amount);
        $('.totalamount').html(totalamount);
        return false;
  });
});
</script>

<p>amount = (rate * pack)</p> 
<p>totalamount = (weight * pack)</p> 

  <form action="/" class="calculator"> 
<label for="rate">rate: </label><input name="rate[]" class="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack[]" class="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag[]" class="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight[]" class="weight" type="text"  size="5" /> 
<input type="submit" value="calculate" /> 
</form> 

<p>Amount: <span class="amount"></span></p> 
<p>Total Amount: <span class="totalamount"></span></p>

Id必须是唯一的，所以我把它改成了类。我已经创建了输入名称的数组。

Answer 2

这个怎么样？

$('form.calculator input:text').blur(function() {
    var rate = parseInt($("#rate").val());
    var pack = parseInt($("#pack").val());
    var weight = parseInt($("#weight").val());

    if (rate > 0 && pack > 0) {
        $('.amount').html(rate * pack);
    }

    if (pack > 0 && weight > 0) {
        $('.totalamount').html(weight * pack);
    }
    return false;
});

工作示例：http://jsfiddle.net/vEBzs/

使用jquery获取表单值

2 个答案: