如何將這些檢查的輸入價格加在一起？

Question

我正在使用此代碼，我需要將檢查價格值的任何輸入添加在一起。他們的價格值是動態生成的。但爲了在這裏他們有價值。任何幫助將不勝感激。謝謝。

var $variantTitle = $('.variant_title'); 
 
var $variantPrice = $('.variant_price'); 
 

 
$('#products :checkbox').on('change', function() { 
 
    if (this.checked) { 
 
    var $row = $(this).closest('tr'); 
 
    var title = $row.find('.title').text(); 
 
    var price = $row.find('.price').text(); 
 
    $variantTitle.text(title); 
 
    $variantPrice.text(price); 
 
    } else { 
 
    $variantTitle.empty(); 
 
    $variantPrice.empty(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="products"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <span class="variant_title"></span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>Hoodie - Unisex Hoodie/Black/S - <span class="price">$0.01</span></td> 
 
     <td class="title hide">Unisex Hoodie/Black/S - $0.01</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>Hoodie - Unisex Hoodie/Black/M - <span class="price">$0.01</span></td> 
 
     <td class="title hide">Unisex Hoodie/Black/M - $0.01</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>Hoodie - Unisex Hoodie/Black/L - <span class="price">$0.01</span></td> 
 
     <td class="title hide">Unisex Hoodie/Black/L - $0.01</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div class="variant_price"></div>

Answer 1

一個簡單的例子，在每一次點擊，調用一個.each函數來遍歷所有複選框，如果選中該複選框將其添加到總價，在結束時輸出總價格。

這裏

+($(this).parent().next('td').find('.price').text().replace(/\$/g, '')); 

查找覈對價格使用$(this).parent().next('td').find('.price') 然後.text().replace(/\$/g, ''));發現價格並更換$ +將強制變量成爲數量，否則你只是concating字符串如0.010.01代替爲0.02。

var $variantTitle = $('.variant_title'); 
 
var $variantPrice = $('.variant_price'); 
 

 
$('#products :checkbox').on('change', function() { 
 
    if (this.checked) { 
 
    var $row = $(this).closest('tr'); 
 
    var title = $row.find('.title').text(); 
 
    var price = $row.find('.price').text(); 
 
    $variantTitle.text(title); 
 
    $variantPrice.text(price); 
 
    } else { 
 
    $variantTitle.empty(); 
 
    $variantPrice.empty(); 
 
    } 
 
    //handling total price 
 
    var total = 0; 
 
    $('#products :checkbox').each(function(){ 
 
    if(this.checked){ 
 
     total += +($(this).parent().next('td').find('.price').text().replace(/\$/g, '')); 
 
    } 
 
    }) 
 
    //output your total price 
 
    $('#total_price').text(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="products"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <span class="variant_title"></span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>Hoodie - Unisex Hoodie/Black/S - <span class="price">$0.01</span></td> 
 
     <td class="title hide">Unisex Hoodie/Black/S - $0.01</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>Hoodie - Unisex Hoodie/Black/M - <span class="price">$0.01</span></td> 
 
     <td class="title hide">Unisex Hoodie/Black/M - $0.01</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>Hoodie - Unisex Hoodie/Black/L - <span class="price">$0.01</span></td> 
 
     <td class="title hide">Unisex Hoodie/Black/L - $0.01</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div class="variant_price"></div> 
 

 
<div>Total Price: $<span id="total_price">0</span></div>