汇总表单值并显示它

Question

我想通过 javascript 对 html 表单上的 ckeckbox 中选择的值求和 请参阅以下示例：

<form>
<input type="checkbox" id="digit_1">
<input type="checkbox" id="digit_2">
<input type="checkbox" id="digit_3">
<input type="checkbox" id="digit_4">

<div id="result"></div>
<input type="submit">
</form>

所以我想在javascript中给复选框值如下图：

digit_1 = 10
digit_2 = 5
digit_3 = 1
digit_4 = 20

And for example when "digit_1" and "digit_3" selected , it show sum of it (11) in the result div 当“digit_3”已删除 = 11 - 1 = 10 在 div 中显示 10 个数字

Answer 1

首先，您可以将复选框的值存储在它们自身的复选框上：

<form>
    <input type="checkbox" id="digit_1" value="10">
    <input type="checkbox" id="digit_2" value="5">
    <input type="checkbox" id="digit_3" value="1">
    <input type="checkbox" id="digit_4" value="20">

    <div id="result"></div>
    <input type="submit">
</form>

然后在你的脚本中，你可以循环遍历每一个并总结这些值：

var value;
for (var i = 1; i <= 4; i++) {
    var checkbox = document.getElementById("digit_" + i);
    if (checkbox.checked) {
        value += +checkbox.value;
    }
}
result.innerText = value;

您的答案将显示在<div>。

Answer 2

您可以执行以下操作

<form>
    <input type="checkbox" class="summable" id="digit_1" data-value="10">
    <input type="checkbox" class="summable" id="digit_2" data-value="5">
    <input type="checkbox" class="summable" id="digit_3" data-value="1">
    <input type="checkbox" class="summable" id="digit_4" data-value="20">
    <div id="result"></div>
</form>

还有 JS：

function updateSum(){
    var sum = 0;
    $('form input.summable:checked').each(function(){
        sum+=parseInt($(this).attr('data-value'),10);
    });
    $('#result').html('Sum: ' + sum);
}

updateSum();

$(document).on('change', 'input.summable', updateSum);

还有一个展示它的 JSFiddle：http://jsfiddle.net/cxh8s/