douwo4837 2014-08-27 13:34
浏览 48
已采纳

在表单提交之前,JS输出所有已检查输入字段值的总和(仅数字)

I have a form that has input checkboxes like the ones in the example. The js code extracts the number from the checked input values and outputs them one next to eachother. How to I edit the code so that when you check a second input checkbox the output is the sum of the numbers?

This is the PHP form:

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

The JavaScript i use:

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

The HTML field:

<p id="test"></p>
  • 写回答

2条回答 默认 最新

  • dongshan3759 2014-08-27 13:44
    关注

    You could store the accomulated value in a global variable, E.g.:

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

    Demo fiddle : http://jsfiddle.net/lparcerisa/08hLc37a/

    With jQuery, it could be done this way:

    $("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) : http://jsfiddle.net/lparcerisa/res4k96j/2/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 我这模型写的不对吗?为什么lingo解出来的下面影子价格这一溜少一个变量
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波