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

例如，当选择“digit_1”和“digit_3”时，它会在结果div中显示它的总和（11）当“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/

求和值并显示它

2 个答案: