如果複選框被選中，使用jquery獲取數字的總和

我有一張桌子。每一行都有一個複選框和一個數字。該數字在一個班級的範圍內。如果複選框被選中，使用jquery獲取數字的總和

如果選中該複選框，我希望將數字與檢查行中的所有其他數字相加。這是行的樣子。

<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的合計div。另外，如果我取消選中這些框，金額也應該改變。

非常感謝任何人的幫助。對此，我真的非常感激！

來源

2013-12-22 CRAIG

你真的想用js嗎？因爲這些腳本可以被操縱......並且它很容易在服務器端實現 – YAMM

感謝大家的回答！ – CRAIG

你需要像

Live Demo

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

來源

2013-12-22 07:20:47 Adil

偉大的解決方案！ – YAMM

我希望如此...... – Adil

每隔一段時間解析腳本就會增加腳本運行時間，並且會導致內存不足。我不推薦這樣做。請嘗試我的解決方案。 –

相當簡單..

$(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/

來源

2013-12-22 07:21:51

試試這個：

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

來源

2013-12-22 07:23:09 HICURIN

嗨，謝謝你的回答！我不認爲我對這個問題已經非常清楚。爲了清晰我編輯它。謝謝！ – CRAIG

你可以把你的代碼放在jsfiddle上嗎？我可以幫你輕鬆。 – HICURIN

在這裏你去hicurin。 http://jsfiddle.net/4K9CN/謝謝！ – CRAIG

這也許？

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

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

來源

2013-12-22 08:05:18 plalx

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。

來源

2013-12-22 13:22:29 Ginden

如果複選框被選中，使用jquery獲取數字的總和

回答

相關問題