如何将这些选中的输入价格加在一起？

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">[=11=].01</span></td>
      <td class="title hide">Unisex Hoodie / Black / S - [=11=].01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>Hoodie - Unisex Hoodie / Black / M - <span class="price">[=11=].01</span></td>
      <td class="title hide">Unisex Hoodie / Black / M - [=11=].01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>Hoodie - Unisex Hoodie / Black / L - <span class="price">[=11=].01</span></td>
      <td class="title hide">Unisex Hoodie / Black / L - [=11=].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, '')); 找到价格并替换 $ + 将强制变量变为数字，否则你只是连接字符串，如 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">[=12=].01</span></td>
      <td class="title hide">Unisex Hoodie / Black / S - [=12=].01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>Hoodie - Unisex Hoodie / Black / M - <span class="price">[=12=].01</span></td>
      <td class="title hide">Unisex Hoodie / Black / M - [=12=].01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>Hoodie - Unisex Hoodie / Black / L - <span class="price">[=12=].01</span></td>
      <td class="title hide">Unisex Hoodie / Black / L - [=12=].01</td>
    </tr>
  </tbody>
</table>

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

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

如何将这些选中的输入价格加在一起？

How do I add together these checked inputs prices?

javascript

jquery

shopify