これらのチェックされた入力価格を一緒にどのように追加しますか？

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, '')); 

価格を見つけて、$ +を置き換えるためにその後.text().replace(/\$/g, ''));を確認し、価格使用$(this).parent().next('td').find('.price') を探すそうでないあなただけの代わりに0.010.01のような文字列をconcatingされ、数になるために、変数を強制します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>