如果选中复选框，则使用jquery获取数字的总和

Question

我有桌子 每行都有一个复选框和一个数字。 该数字在一个类的范围内。

如果选中此复选框，则我希望将数字与选中的行中的所有其他数字相加。 这是该行的样子。

 <td><input class="box" type="checkbox" name="selclips[]" value="1234"></td><td><span class="amount">45.00</span></td>
 <td><input class="box" type="checkbox" name="selclips[]" value="1235"></td><td><span class="amount">65.00</span></td>

然后在底部，我有：

 <td>Total</td><td><div id="total"></div></td>

因此，需要有关JS或jquery的帮助以将这些美元金额与span标签相加，如果在该行中选中了该复选框，则可以提供总计？ 因此，在上面的示例中，如果同时选中了两个框，则脚本将合计45.00和65.00并将总计110放入Total div中。 另外，如果我取消选中这些框，则金额也应更改。

非常感谢任何人都能提供的帮助。 我真的很感激！

Answer 1

你需要类似的东西

现场演示

$('.box').change(function(){
   var total = 0;
   $('.box:checked').each(function(){
        total+=parseFloat($(this).parent().next('td').find('.amount').text());
   });
   $('#total').text(total);
});

Answer 2

相当简单..

$(function(){

    $( ".box" ).on( "click", function(){
        console.log($(this).next().html());
        var total = 0;
        $('.box:checked').each(function(){
         total += parseFloat($(this).next().html());
        });
        $("#total").text('Total is : ' + total);
    });

});

这有效..

http://jsfiddle.net/hqR2r/2/

Answer 3

尝试这个：

 var total = 0;
$('.box').click(function(){
    if($(this).prop('checked')){
      total += Number($(this).closest('tr').children('td:last-child').text());
  }
    else{
      total -= Number($(this).closest('tr').children('td:last-child').text());
    }
  $('#total').text(total);
});

这是JSFIDDLE

Answer 4

这也许吗？

var total = 0,
    $totalEl = $('.total');

$('.box:checkbox').click(function () {
    total += (this.checked? 1 : -1) * +this.parent('td').next().children('.amount').text();
    $totalEl.text(total);
});

Answer 5

var total =  Array.prototype.slice.call($('input.box:checkbox:checked'), 0) // changes jQuery object to array of DOM elements
    .reduce(function(a, b) { // calls reduce method
        return a + Number(b.value);
    }, 0);

简单快捷。

reduce方法文档 。