Question

我目前有一系列不同项目的复选框，选中后会修改总计。 JavaScript代码如下。

<script type="text/javascript">
function checkTotal() {
document.listForm.total.value = '';
var sum = 0.00;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseFloat(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum.toFixed(2);
}

</script>

此代码工作正常，但所有复选框都具有相同的输入名称“choice”。我需要更改它，以便每个输入名称都不同，例如choice1，choice2，choice3等。如何更改JavaScript以添加所有不同名称的复选框，而不是仅添加名为“choice”的复选框。

感谢任何帮助，良好的HTML和CSS知识，但非常基本的JavaScript。感谢。

Answer 1

您可以执行以下操作：

function checkTotal() {
    document.listForm.total.value = '';
    var sum = 0.00;
    var i, inputs, input;

    inputs = document.getElementsByTagName('input')

    for (i=0;i<inputs.length;i++) {
        input = inputs[i]
        if (input.type === 'checkbox' && input.name.substr(0, 6) === 'choice') {
            sum = sum + parseFloat(input.value);
        }
    }
    document.listForm.total.value = sum.toFixed(2);
}

这未经过测试，但代码应通过DOM查看所有输入元素。然后它将遍历它们并检查那些也是名称以“choice”开头的复选框。然后它会将复选框的值添加到总和中。

像jQuery这样的库让这类东西变得容易多了。

Answer 2

使用jQuery，下面的代码片段将添加页面上的所有复选框值。我没有测试过这个，但它应该可以工作。

$("input[type=checkbox]").each(function(){
   if(this.checked){
     sum = sum+this.val();
   }
});

如何将所选复选框与不同的输入名称相加

2 个答案: