表單提交前所有檢查的輸入字段值的JS輸出總和（僅數字）

Question

我有一個表單，其輸入複選框與示例中的複選框類似。 js代碼從檢查的輸入值中提取數字，並將它們輸出到彼此旁邊。如何編輯代碼，以便在檢查第二個輸入複選框時輸出是數字的總和？

這是PHP形式：

<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 1 def" name="1"> 
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 2 def" name="2"> 
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 3 def" name="3"> 

中的JavaScript我使用：

<script type="text/javascript"> 
    function toggleCheckbox(element){ 
     if (element.checked){ 
     var number = element.value.replace (/[^\d.]/g, ''); 
     document.getElementById("test").innerHTML += " " + number; 
     } 
} 
</script> 

HTML字段：

<p id="test"></p> 

Answer 1

您可以在accomulated值存儲在一個全局變量，如：

var sum = 0; 

function toggleCheckbox(element){ 
     var number = element.value.replace (/[^\d.]/g, ''); 
     if (element.checked) 
      sum += Number(number); 
     else 
      sum -= Number(number); 
     document.getElementById("test").innerHTML = sum; 
} 

演示小提琴：http://jsfiddle.net/lparcerisa/08hLc37a/

使用jQuery，這是可以做到這樣：

$("input[type=checkbox]").click(function(){ 
    var sum=0; 
    $("input[type=checkbox]:checked").each(function(index){ 
     sum += Number($(this).val().replace(/[^\d.]/g,'')); 
    }); 
    $("#test").html(sum); 
}); 

Demo小提琴（jquery）：http://jsfiddle.net/lparcerisa/res4k96j/2/

Answer 2

一種方法（給定修改的HTML，下面的jQuery）是：

function toggleCheckbox(element) { 
    if (element.checked) { 
     var number = element.value.replace(/[^\d.]/g, ''); 
     document.getElementById("test").innerHTML += " " + number; 
    } 
} 

// binding the change-event handler using jQuery, outside of the HTML:  
$('input[type="checkbox"]').on('change', function() { 
    toggleCheckbox(this); 
}); 

// binding the click-event handler: 
$('#total').on('click', function(){ 
    // using split() to get an array of the numbers: 
    var numbers = $('#test').text().split(' '), 
    // using Array.reduce() to iterate over the elements of the array: 
     total = numbers.reduce(function(a,b) { 
      // using '(+a) + (+b)' to coerce the array elements to numbers 
      // (from strings) and then summing them together: 
      return (+a) + (+b); 
     }); 
    // setting the text of the '#result' element: 
    $('#result').text('(' + total + ')'); 
}); 

JS Fiddle demo。

修訂的HTML：

<input type="checkbox" value="abc 1 def" name="1" /> 
<input type="checkbox" value="abc 2 def" name="2" /> 
<input type="checkbox" value="abc 3 def" name="3" /> 
<button id="total">Find the total</button> 
<span id="test"></span><span id="result"></span> 

參考文獻：

• 的JavaScript：
  • Array.prototype.reduce()。
• 的jQuery：
  • on()。
  • text()。