从复选框中获取值，添加它们并显示结果答案

【问题标题】：Getting values from checkbox, add them, and display the result从复选框中获取值，添加它们并显示结果
【发布时间】：2011-11-09 09:53:52
【问题描述】：

我有一些复选框，它们都有不同的值但都是数字。

我想获取检查的值，然后将数字相加，然后在我的 div 中显示结果。

<div id="pakker">
<input type="checkbox" value="39" />test 1<br/>
<input type="checkbox" value="79" />test 2<br/>
<input type="checkbox" value="29" />test 3<br/>
<input type="checkbox" value="49" />test 4<br/>
ect
</div>

到目前为止，我所拥有的是：var pakker = $('#pakker checkbox:checked').val();

更新： 我想要结果的地方：<h1 id="sk">0</h1>

但它并没有真正起作用，尽管我没有收到任何错误。

有谁知道如何做到这一点，尽可能简单？

【问题讨论】：

您使用checkbox 作为选择器，但没有这样的标签名称。我相信您正在寻找:checkbox（前导冒号很重要！），然后您将不得不使用与.val 不同的东西来处理返回的多个对象。

标签： jquery checkbox add

【解决方案1】：

您可以使用attribute equals 选择器来选择复选框（您也可以使用:checkbox 选择器，但这会更慢）。然后，您需要iterate 覆盖选中的复选框并保持值的总和：

var total = 0;
$("#pakker input[type='checkbox']:checked").each(function() {
    total += parseInt(this.value, 10);
});
//Do whatever you like with total

这是working example。

【讨论】：

谢谢，添加 ect.. 但当我按“测试 2”时，我看不到结果？
我不完全确定你的意思。如果您希望在单击复选框时发生某些事情，则必须将 click 或 change 事件侦听器绑定到复选框。
好的，像这样？ $(function() { $('#pakker :checked').click(updateSK); updateSK(); -another new function });

【解决方案2】：

在这里你可以看到做什么：http://jsfiddle.net/vaKWs/6/

自动更新为总和。

【讨论】：

谢谢，但是应该没有按钮，需要自动显示

【解决方案3】：

var result = 0;
$("#pakker input:checked").each(function(){ result += $(this).val(); });

alert(result );

【讨论】：

解析整数$("#pakker input:checked").each(function(){ result = parseInt($(this).val())+parseInt(result); });

【解决方案4】：

如果你有幸不支持旧版浏览器（或shim reduce()）...

var sum = $('#pakker :checkbox:checked').map(function() {
   return parseInt(this.value, 10);
}).get().reduce(function(prev, current) {
    return prev + current;
}, 0);

jsFiddle.

【讨论】：

【解决方案5】：

示例代码：

$(document).ready(function(){
        $("input[type='checkbox']").click(function(){
            var total = 0;
            $("#pakker input[type='checkbox']:checked").each(function() {
                total += parseInt(this.value, 10);
            });
            $('#result').html(total);
        });
    });

结果：

<span id="result"></span>
<div id="pakker">
<input type="checkbox" value="39" />test 1 - value 39<br/>
<input type="checkbox" value="79" />test 2 - value 79<br/>
<input type="checkbox" value="29" />test 3 - value 29<br/>
<input type="checkbox" value="49" />test 4 - value 49<br/>
ect
</div>

【讨论】：