如何将具有不同输入名称的选定复选框添加在一起答案

【问题标题】：How to add together selected checkboxes with different input names如何将具有不同输入名称的选定复选框添加在一起
【发布时间】：2013-10-19 12:54:15
【问题描述】：

我目前有一系列用于不同项目的复选框，当它们被选中时会修改总数。 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>

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

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

【问题讨论】：

标签： javascript html checkbox cumulative-sum

【解决方案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 查找所有输入元素。然后它将遍历它们并检查那些也是名称以“选择”开头的复选框。然后它将复选框的值添加到总和中。

像 jQuery 这样的库让这类事情变得容易得多。

【讨论】：

感谢您的回复，但总数并没有与此代码相加。不知道为什么，它只是保持在初始值 0.00。
还有什么想法吗？将不胜感激！
我对代码做了一些更改。我认为它现在会起作用。如果没有，请发布 HTML 以及您在控制台中遇到的任何错误。您可以按照developers.google.com/chrome-developer-tools/docs/console 的说明访问 Chrome 中的控制台

【解决方案2】：

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

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

【讨论】：