douwo4837
2014-08-27 13:34
浏览 46

在表单提交之前,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/

    打赏 评论
  • dqvtm82066 2014-08-27 13:43

    One approach (given the revised HTML, below the jQuery) is:

    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.

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

    References:

    打赏 评论

相关推荐 更多相似问题