0

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

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

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

所以基本上我会检查可以选择哪些框的每个组合，一次一个。必须有一种更有效的方法来实现这一点，因此任何提示都会受到赞赏。提前感谢您的帮助。

4

2 回答 2

2

假设您的 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 小提琴演示。

我认为上面的代码是跨浏览器兼容的；但是如果您正在寻找一种更先进的技术来简化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 小提琴演示。

参考：

于 2013-05-16T15:28:19.097 回答
0

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

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  />
于 2013-05-16T16:12:21.200 回答