如何将这些检查的输入价格加在一起？

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>