如何根据选中的复选框数量设置要在条纹按钮上收取的金额答案

【问题标题】：How to set amount to be charged on stripe button based on number of checkboxes selected如何根据选中的复选框数量设置要在条纹按钮上收取的金额
【发布时间】：2019-06-16 07:27:36
【问题描述】：

更新/编辑：

我正在尝试根据选中的复选框数量设置 Stripe 支付按钮的金额。每个成本为 3 美元。 IE。;如果选中一个，立即付款按钮将显示立即付款 3 美元。如果选中两个，则立即付款按钮将显示立即付款 6 美元，依此类推。我对铁轨的经验为零。 Stripe 完成此操作的文档对我来说是陌生的。我只是不知道从哪里开始。这是我目前所拥有的：

<dl>
 <dt><div label id="mustcheck"><label for="cat1">1</label><input type="checkbox" name="cat1" id="cat1" class="categories" value="checkbox" onclick="get1()" /></dt>

    <dt><label for="cat2">2</label><input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" /></dt>

    <dt><label for="cat3">3</label><input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" /></dt>

    <dt><label for="cat4">4</label><input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" /></dt>

    <dt><label for="cat5">5<input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" /></div></dt>  

    Price: <strong>$<span name="total-price-view" id="total-price-view" value="">0</strong></span>

    <input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick=""/>

更新：我将在评论页面上使用标准按钮。因此，我从@korben 的示例中获取了代码并将其合并到我的注册页面中，如下所示（并且还在html 表单中添加了类和<span name="total-price-view>）：

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
for (var i = 0; i < pacs.length; i++) {
console.log('looping');
pacs[i].addEventListener('change', function (e) {
        var totalPrice = calculatePrice();
  document.getElementById('total-price-view').innerHTML = totalPrice;
    });
  }
}

function calculatePrice() {
var pricePerCheckbox = 3.00;  // $3.00
var totalChecked = 0;
for (var i = 0; i < pacs.length; i++) {
    if (pacs[i].checked) {
    totalChecked++;
     }
 }
var Totals = totalChecked * pricePerCheckbox;
return Totals;
}

 attachEventListeners();

  </script>

我现在需要做的是将 <span> 的值发送到评论页面。

我试过了：

<body onload="calculatePrice()">
Price: <strong>$<span name="total-price-view" id="total-price-view" value="return calculatePrice()">0</strong></span>

我也试过了：

  document.getElementById('total-price-view').value = Totals;

【问题讨论】：

标签： javascript php html ruby-on-rails stripe-payments

【解决方案1】：

我认为最好的办法是为每个复选框指定一个特定的类（例如price-adjusted-checkbox），您可以使用它在 Javascript 中引用它。我在这里写了一个如何做到这一点的例子：

https://jsfiddle.net/a6cvd5px/9/

您将为它们附加一个事件侦听器以侦听更改，然后当发生更改时，您会触发重新计算。然后重新计算可以转到您的.open()。

【讨论】：

感谢您的帮助。我已将您在 jsfiddle 中的示例集成到我的表单中。它工作得很好。但是，我怎样才能将该号码推送到下一页进行查看并能够在付款按钮中检索它以显示美元金额？用户填写注册表单，点击审核按钮，进入审核页面（我想在此处再次显示 $ 金额），在那里他们可以选择支付按钮（我希望金额显示在支付按钮上）。