如何使用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;
   }
  }
 }