复选框复选值

我已经在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>

在那里，它完美的作品，当我实现这个在我的系统没有reslut或任何错误。我的系统中的复选框是由MySQL输出产生的。

任何建议有什么大错误？

enter image description here

来源

2014-12-06 Muiter

只是好奇，怎么会是那笔有用吗？ – Strawberry 2014-12-06 13:34:38

您的代码可能运行之前的元素被动态生成的，因此事件处理程序没有被附接。尝试使用委托方法.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>

来源

2014-12-06 13:17:00

当我将复选框移动到页面的第一部分，其中没有任何动态生成问题仍然存在。 – Muiter 2014-12-07 11:08:08

@Muiter演示中没有问题..？也许创建一个演示问题的在线演示..？ – 2014-12-07 11:40:37

我更喜欢使用纯JavaScript的解决方案，因为你没有在你的代码使用jQuery。我认为问题原因来自Javascript事件监听器。当您为文档创建新元素时，应该添加其事件。

在第一个代码中，我创建了一个复选框，但这不适用于其他人。 link_1

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

然而，在第二代码我添加事件作为其它复选框，以便付款合计值计算由新的事件来完成。 link_2

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

我希望这将有助于您的问题:)

来源

2014-12-06 13:58:51 kemalsami

当我从MySQl传递的循环中移动复选框时，它仍然不起作用，所以问题不在于此部分。 – Muiter 2014-12-07 10:58:45

复选框复选值

回答

相关问题