java - 多个复选框选中值

Question

我在 JSFiddle 中编写了以下代码，以便能够获取复选框组合值的总和。

脚本

var inputs = document.getElementsByClassName('sum'),
        total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            total.innerHTML = parseFloat(total.innerHTML) + add
        }
    }

代码

<input value="33" type="checkbox" class="sum" data-toggle="checkbox">
    <input value="50" type="checkbox" class="sum" data-toggle="checkbox">
        <input value="62" type="checkbox" class="sum" data-toggle="checkbox">
<span id="payment-total">0</span>

它工作完美，当我在我的系统中实现它时，没有结果或任何错误。我系统中的复选框是由 MySQL 输出生成的。

有什么建议可能是错误的吗？

Answer 1

您的代码可能在动态生成元素之前运行，因此不会附加事件处理程序。尝试使用 .on() 委派事件处理程序方法:

$total = $('#payment-total');
$(document).on("click", ".sum", function() {
  var add = this.value * (this.checked ? 1 : -1);
  $total.text(function(i, value) {
      return parseFloat(value) + add;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="33" type="checkbox" class="sum" data-toggle="checkbox">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox">
<input value="62" type="checkbox" class="sum" data-toggle="checkbox">
<span id="payment-total">0</span>