Question

我最近在大学开始使用javascript并且遇到了一些麻烦。我不是在这里包括我的代码，因为我不希望它为我写的我只需要指向一个正确的方向。

所以，我有三个复选框，每个复选框都有不同的值，我需要将所选框的值加在一起。我知道如何做到这一点，但我这样做的方式似乎有点长，我确信有更好的方法。

目前我有if语句检查是否选择了box1 box2和box3，如果是，则添加它们，否则如果选择了box 1和box2则添加它们，否则如果选择box1和box2则添加它们上。

所以基本上我可以检查每个组合的选项，一次一个。必须有一种更有效的方法来实现这一点，所以任何提示将不胜感激。在此先感谢您的帮助。

Answer 1

假设您的HTML类似于以下内容：

<input name="demo" type="checkbox" checked value="1" />
<input name="demo" type="checkbox" value="2" />
<input name="demo" type="checkbox" checked value="3" />

然后只需检索相关名称的元素，然后遍历collection / nodeList并将值添加到声明的'total'变量中：

var boxes = document.getElementsByName('demo'),
    total = 0;

for (var i = 0, len = boxes.length; i < len; i++){
    if (boxes[i].checked && boxes[i].type.toLowerCase() == 'checkbox') {
        total += parseInt(boxes[i].value, 10);
    }
}

console.log(total);

JS Fiddle demo

我认为上面的代码是跨浏览器兼容的;但如果您正在寻找一种更新的简化for循环的技术（省略if检查），那么您可以使用document.querySelectorAll()作为选择器技术：

var boxes = document.querySelectorAll('input[name="demo"][type="checkbox"]:checked'),
    total = 0;

for (var i = 0, len = boxes.length; i < len; i++){
    total += parseInt(boxes[i].value, 10);
}

console.log(total);

JS Fiddle demo

参考文献：

Answer 2

使用+=和简单的三元运算符：

var total = 0;
total += document.getElementById('cb1').checked ? parseInt(document.getElementById('cb1').value, 10) : 0;
total += document.getElementById('cb2').checked ? parseInt(document.getElementById('cb2').value, 10) : 0;
total += document.getElementById('cb3').checked ? parseInt(document.getElementById('cb3').value, 10) : 0;
alert(total);

我应该披露与以下内容相同的内容：

var total2 = 0;
if (document.getElementById('cb1').checked) total2 += parseInt(document.getElementById('cb1').value, 10);
if (document.getElementById('cb2').checked) total2 += parseInt(document.getElementById('cb2').value, 10);
if (document.getElementById('cb3').checked) total2 += parseInt(document.getElementById('cb3').value, 10);
alert(total2);

示例HTML：

<input id="cb1" type="checkbox" value="341" checked />
<input id="cb2" type="checkbox" value="242" />
<input id="cb3" type="checkbox" value="345" checked  />

如果声明三个复选框javascript

2 个答案: