Jquery +添加复选框值

Question

我有一个带有许多复选框的页面。 每个复选框对应不同的项目（虚拟玫瑰），并且玫瑰具有不同的值。 我已将玫瑰的值放入复选框的 value="" 中。 我需要将勾选的复选框的总价值相加 - 例如：100、230 等。 唯一的其他因素是我只需要添加带有“giftsRosesCheckBox”类的复选框。

<table id="tableGiftsWhiteRose"><tr>
  <td colspan="2">White Rose</td></tr><tr>
  <td><input type="checkbox" class="giftsRosesCheckBox" value="100"/></td>
  <td class="credits">100 credits</td> 
</tr></table>

<table  id="tableGiftsRedRose"><tr>
  <td colspan="2">Red Rose</td></tr><tr>
  <td><input type="checkbox" class="giftsRosesCheckBox" value="130"/></td>
  <td class="credits">130 credits</td>      
</tr></table>

<table><tr>
  <td colspan="2">Stunning Red Rose</td></tr><tr>
  <td><input type="checkbox" class="giftsRosesCheckBox" value="150"/></td>
  <td class="credits">150 credits</td>      
</tr></table>

我真的不知道如何做到这一点，所以朝正确的方向推动会很棒。

非常感谢。

Answer 1

您可以循环检查复选框并添加它们的值。

var total = 0;
$(':checkbox:checked.giftsRosesCheckBox').each(function() {
    total += +this.value;
});

jsFiddle。

如果您不必支持旧版浏览器（或 shim reduce()），您可以通过更实用的方式来实现...

var total = $(':checkbox:checked.giftsRosesCheckBox')
            .get()
            .reduce(function(total, checkbox) {
                 return total + +checkbox.value;
             }, 0);

jsFiddle.

Answer 2

$(".giftsRosesCheckBox").click(function() {
    var total = 0;
    $(".giftsRosesCheckBox:checked").each(function() {
        total += parseInt($(this).val(), 10);
    });
    alert(total);
});

Answer 3

var total =0;
$('input[type=checkbox].giftsRosesCheckBox, input[checked=checked].giftsRosesCheckBox').each(function(){
total += this.val();
});