Javascript 提交表单之前，JS输出所有选中输入字段值的总和（仅数字）

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

功能切换复选框（元素）{
如果（元素已选中）{
变量编号=element.value.replace（/[^\d.]/g'，）；
document.getElementById（“test”）.innerHTML+=“”+数字；
}
} 

HTML字段：

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

一种方法（考虑到jQuery下面经过修订的HTML）是：

修订版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:
• jQuery：

---

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

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

演示小提琴：

使用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 fiddle（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);
} );