javascript - 三个复选框的 if 语句 javascript

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" />

然后只需检索相关名称的元素，然后迭代集合/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 .

引用文献:

• document.getElementsByName() .
• document.querySelectorAll() .
• String.toLowerCase()
• parseInt()