複選框複選值

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

複選框複選值

回答

相關問題