如何使用 getElementsByName 访问复选框及其值

Question

假设我有一个表单的以下部分：

<td>
 <p>
  <input type="checkbox" name="faddon" onchange="iaddon()" value="89.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="29.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="49.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="39.00" />
 </p>
</td>

<td>
 <p>
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" />
 </p>
</td>

每次用户选择或取消选择复选框时，我都需要脚本将变量 addon 重新计算到选中的框的所有值的总和中。这是我首先想出的代码，但它似乎对我不起作用：

function iaddon() {
 addon=0;
 av=document.getElementsByName("faddon");
 for (e=0;e<av.length;e++) {
  if (av[e].checked==true) {
   addon+=av[e];
   }
  }
 }

脚本不断返回 NaN 作为插件的值。起初，我想知道 javascript 是否将值读取为字符串而不是整数，但在 av[e] 周围添加 (x)*1 并不能解决此问题。然后，我对 getElementsByName 进行了更多阅读，并了解到它可能不是一个典型的数组，而是一个 nodeList。

我是 Javascript 新手，在谷歌搜索数小时后无法弄清楚如何操作这个 nodeList。任何帮助表示赞赏。我想将 8 个复选框保留在单独的表格单元格中，因此据我所知，使用 childNodes 之类的东西在这里并不完全有效。在这一点上，我也想避开任何 jQuery ......我仍在学习，我想确保我首先了解如何在普通的旧 javascript 中做到这一点。谢谢！

Answer 1

您需要使用 value 属性并将其解析为数字。 例如：

function iaddon()
{
    addon = 0;
    for (e = 0; e < av.length; e++)
    {
        if (av[e].checked == true)
        {
            addon += parseInt(av[e].value, 10);
        }
    }
}

Answer 2

av[e] 将返回元素而不是元素的值，因为 addon 不是数字。

相信你想用av[e].value

还请注意，由于您在函数开头设置了addon=0，因此在函数调用期间，addon 的值将始终仅为av[e].value 的值。

function iaddon() {
 addon=0;
 av=document.getElementsByName("faddon");
 for (e=0;e<av.length;e++) {
  if (av[e].checked==true) {
   addon+=av[e].value;
   }
  }
 }

Answer 3

顺便说一句，突兀的js

<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00"/>

维护你的代码很郁闷，因为js和html代码是一起写的。

尝试编写不显眼的 js 代码，例如：

在html中：

 <input id="index1" type="checkbox" name="faddon" value="89.00"/>

在js中：

$('index1').click(function() {
  // Edit your function
});