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输出生成。

有什么建议的错误吗？

enter image description here

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我更喜欢使用纯javascript作为您的解决方案，因为您没有在代码上使用Jquery。我认为问题原因来自 Javascript eventListener 。为文档创建新元素时，应添加其事件。

在第一个代码中，我创建了一个复选框，但这不像其他代码那样有用。 link_1

<http://jsfiddle.net/3oweu107/1/>

然而，在第二个代码中，我将事件添加为其他复选框，以便由新事件完成支付总值计算。 link_2

<http://jsfiddle.net/3oweu107/2/>

我希望这会有助于解决您的问题：）

多个复选框选中的值

2 个答案: