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

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

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

演示 fiddle :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);
} );

演示 fiddle (jquery):http://jsfiddle.net/lparcerisa/res4k96j/2/