jQuery - 根据选中的复选框获取总数

Question

我有一系列代表各种食品的复选框。我想根据用户选择的内容创建小计。我一直在查看jQuery文档，我看到如何更新文本框的值，但是每次“检查”新复选框时，如何进行新的计数。此外，当复选框“未选中”时会发生什么。有没有办法将每个项目的值存储在复选框的HTML代码中？

我有一个jsFiddle例子，我一直在这里愚弄......

http://jsfiddle.net/fQTUp/2/

Answer 1

将value的价格添加到复选框并计算。这是：http://jsfiddle.net/fQTUp/9/

Answer 2

你可以这样做：

此处的演示演示：http://jsfiddle.net/jfriend00/RT4XS/

// When the page is ready
$(document).ready(function() {
    $("input").click(function(event) {
        updateTotal();
    });
});

function updateTotal() {
    var total = 0;
    $("#menu input:checked").each(function() {
        total += parseFloat(this.value);
    });
    $('#TotalCost').val("$" + total.toFixed(2));
}

您可以将实际HTML元素的价格作为值，然后只是迭代检查项目的价格。