表单提交前所有检查的输入字段值的JS输出总和（仅数字）答案

【问题标题】：JS output sum (only the numbers) of all checked input fields values before form submit表单提交前所有检查的输入字段值的JS输出总和（仅数字）
【发布时间】：2014-08-27 13:34:24
【问题描述】：

我有一个表单，其中包含示例中的输入复选框。 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>

【问题讨论】：

使用变量来保存总和 .. 将其放在函数范围之外并为其添加新值并打印它而不是数字 ..
好吧，只给出数字的值，然后检查是否只是将它们加起来..

标签： javascript php jquery

【解决方案1】：

您可以将累计值存储在全局变量中，例如：

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

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

【讨论】：

【解决方案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()。

【讨论】：