Javascript 从jQuery中的数量输入框计算价格

我在jQuery中遇到了一个从数量计算价格的小问题。这些是我的输入框

Quantity: <input type="text" style="width: 50px;" name="quantity" id="quantity" class="txt" value="1" />

Price: <input type="text" style="width: 50px;" name="item_price" id="item_price" class="txt" value="2990" />

Total Price: <input type="text" style="width: 50px;" name="total_price" id="total_price" class="txt" value="" />

数量：
价格：
总价：

我假设您需要公式或如何获得输入元素的值：

var quantity = $("#quantity").val();
var iPrice = $("#item_price").val();

var total = quantity * iPrice;

$("#total_price").val(total); // sets the total price input to the quantity * price

alert(total);

为键控编辑：

$('#quantity').keyup(function() {
   var quantity = $("#quantity").val();
   var iPrice = $("#item_price").val();

   var total = quantity * iPrice;

   $("#total_price").val(total); // sets the total price input to the quantity * price
});

更新了以显示脚本标记中的完整示例

如果您想要公式以及如何“看到”更改：

<script type="text/javascript">
    $(function() {  //  In jQuery 1.6+ this is same as $(document).ready(function(){})
        $('#quantity, #item_price')  //  jQuery CSS selector grabs elements with the ID's "quantity" & "item_price"
            .on('change', function(e) {  //  jQuery 1.6+ replcement for .live (dynamically asigns event, see jQuery API)
            //  in this case, our event is "change" which works on inputs and selects to let us know when a value is changed
                //  below i use inline if statements to assure the values i get are "Real"
                var quan = $("#quantity").val() != "" ? parseFloat($("#quantity").val()) : 1,  //  Get quantity value
                    pric = $("#item_price").val() != "" ? parseFloat($("#item_price").val()) : 0;  //  Get price value
                $('#total_price').val(pric*quan); // show total
            });
    });
</script>

$（函数（）{//在jQuery1.6+中，这与$（document.ready）（函数（）{}）相同
$（“#数量，#商品价格”）//jQuery CSS选择器获取ID为“数量”和“商品价格”的元素
.on（'change'，函数（e）{//jQuery 1.6+对.live的回复（动态asigns事件，请参见jQuery API）
//在这种情况下，我们的事件是“更改”，它对输入起作用，并选择让我们知道值何时更改
//下面我使用内联if语句来确保我得到的值是“真实的”
var quan=$（“#quantity”）.val（）！=''？parseFloat（$（“#quantity”）.val（））：1，//获取数量值
pric=$（“#项目价格”）.val（）！=”？parseFloat（$（“#项目价格”）.val（））：0；//获取价格值
$（“#总价”）.val（pric*quan）；//显示总价
});
});

---

无。除非你解释你想要实现什么。它应该基于用户输入吗？从输入字段中的硬编码值开始？页面加载时是否会发生这种情况？在飞行中。。。我就是这样做的。您需要在

部分正上方的

中添加上述内容。。以防万一，不明显的是，这种使用

.on

并不能取代live。。您必须使用委托版本，即

$（staticparent）.on（'events'，'elements'，function（））

当我更改数量时，这是可行的，但没有实时/键控，有什么想法吗？@HafsteinnMárMásson提供了一个键控示例，用于说明数量更改时的键控。希望这有帮助。谢谢，但现在价格不会显示，除非我在数量字段中进行更改，有任何快速修复方法吗？@HafsteinnMárM sson价格应显示在页面加载中。请查看：@HafsteinnnmárMásson如果您希望在价格更改时实时更改，您也需要一个事件处理程序来处理此问题，您可以复制我为您创建的keyup函数，并将“#数量”更改为“#物品#价格”