Fatal编程技术网
  • javascript/
  • Javascript 如何根据选中的复选框数设置条带按钮上的收费金额

Javascript 如何根据选中的复选框数设置条带按钮上的收费金额

javascript php html ruby-on-rails stripe-payments

Javascript 如何根据选中的复选框数设置条带按钮上的收费金额,javascript,php,html,ruby-on-rails,stripe-payments,Javascript,Php,Html,Ruby On Rails,Stripe Payments,更新/编辑： 我正在尝试根据选中的复选框数设置条带支付按钮的$amount。每本售价为3美元。即。；如果选中此选项，则立即付款按钮将反映立即付款$3。如果选中了两个选项，则立即付款按钮将反映立即付款$6，依此类推。我对rails没有任何经验。Stripe实现这一点的文档对我来说是陌生的。我只是不知道从哪里开始。以下是我到目前为止的情况： <dl> <dt><div label id="mustcheck"><label for="cat1">1&

更新/编辑：

我正在尝试根据选中的复选框数设置条带支付按钮的$amount。每本售价为3美元。即。；如果选中此选项，则立即付款按钮将反映立即付款$3。如果选中了两个选项，则立即付款按钮将反映立即付款$6，依此类推。我对rails没有任何经验。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=""/>
我认为在这里最好的做法是为每个复选框指定一个特定的类（例如，
价格调整复选框
），您可以使用它在Javascript中引用它。我在这里写了一个如何做到这一点的例子：

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

谢谢您的帮助。我已经将您在JSFIDLE中的示例集成到我的表单中。它工作得很好。但是，我如何才能将该数字推到下一页进行查看，并能够在“付款”按钮中检索该数字以显示美元金额？用户完成注册表单后，单击“查看”按钮，进入“查看”页面（我想在此处再次显示$amount），在该页面中，他们可以选择“支付”按钮（我想在“支付”按钮上显示金额）。 
<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>

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