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

Question

我正在使用此代码，我需要将检查价格值的任何输入加在一起。它们的价格值是动态生成的。但为了在这里，他们有一个价值。任何帮助将不胜感激。感谢。

＆＃13;

＆＃13;

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();
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一个简单的例子，在每次点击时，调用一个.each函数循环遍历所有复选框，如果选中该复选框，则将其添加到总价格中，最后输出总价格。

下面

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

查找已检查的价格使用$(this).parent().next('td').find('.price') 然后.text().replace(/\$/g, ''));查找价格并替换$ +将强制变量变为数字，否则您只是将字符串汇总为0.010.01而不是0.02。

＆＃13;

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;