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

你需要像

这样的东西

<强> Live Demo

$('.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 method documentation

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

5 个答案: