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

【问题标题】：jQuery - Getting total depending on which checkboxes are selectedjQuery - 根据选中的复选框获取总数
【发布时间】：2013-08-27 22:30:08
【问题描述】：

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

我有一个 jsFiddle 示例，我在这里一直在玩弄......

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

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

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

【讨论】：

太棒了！我现在明白了。我正在寻找一个 if..then 来检查复选框是否被选中。但是， $("input:checked").each 的效果要好得多。非常感谢伟大的 jsFiddle 示例。
我还有一些选项（单选）按钮（用于芥末、番茄酱、泡菜等）。有没有办法将这些从总计中排除，因为就价格而言它们不代表“价值”？现在，它们似乎包含在“已检查”项目的集合中。有没有办法将其限制为复选框而不是单选按钮？
是的，在选择器 $("input[type=checkbox]").click(... insead of $("input").click(... 中使用
经过一番挖掘，我发现我必须将 type=checkbox（如 Samich 提到的）添加到“每个”循环中，以防止使用单选按钮的值。我也可以使用 $("input:checkbox:checked").each( ...

【解决方案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 元素上，然后只需遍历选中的项目将价格相加。

【讨论】：